CSS3中2D和3D的转换

CSS3 转换：

 CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。

---

2D转换方法：

• translate()方法：(位移) 根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。
    例：translate(50px,100px)是从左边元素移动50个像素，并从顶部移动100个像素。
  
• rotate()方法：(旋转)在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
    例：rotate(30deg)元素顺时针旋转30°
  
• scale() 方法：(缩放)该元素增加或减少的大小，取决于宽度(X轴)和高度(Y轴)的参数。
    例：scale(2,4)转变宽度为原来的大小的2倍，何其原始大小4倍的高度。
  
• skew()方法：(扭曲)该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度。
    例：skew(30deg,20deg)元素在x轴和y轴上倾斜20°和30°
  
• matrix()方法：(矩阵) matrix方法有六个参数，包含旋转，缩放，移动和倾斜共功能。
    例如：matrix(n,n,n,n,n,n)使用六个值的矩阵。
  

---

transform：适用于2D和3D转换的元素。

transform-origin:允许更改转化元素的位置。

---

3D转换方法：

1.rotateX() 方法：围绕其在一个给定度数X轴旋转的元素。
2.rotateY()方法：围绕其在一个给定度数Y轴旋转的元素。
3.rotate3d(x,y,z.angle):定义3D转换。
4.scale3d(x,y,z)方法：定义3D缩放转换。

---

transform-style:规定被嵌套元素如何在3D空间中显示。

perspective:规定3D元素的透视效果。

perspective-origin:规定3D元素的底部位置。

backface-visibility :定义元素在不面对屏幕时是否可见。