CSS3 常用属性（五）-- 2D、3D

      2D转换 – transform

      　　transform：转换属性

      　　transform-origin：转换的原点，可以是left、right、bottom、top、px、%。

      2D转换就是平面上的旋转（rotate）、拉伸（skew）、缩放（scale）、位移（translate）等。

      可以赋值如下情况：

      　　matrix(n,n,n,n,n,n) ：定义 2D 转换，使用六个值的矩阵。

　　　　translate(x,y)：定义 2D 转换，沿着 X 和 Y 轴移动元素。

　　　　translateX(n)：定义 2D 转换，沿着 X 轴移动元素。

　　　　translateY(n)：定义 2D 转换，沿着 Y 轴移动元素。

      　　scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。

      　　scaleX(n)：定义 2D 缩放转换，改变元素的宽度。

　　　　scaleY(n)：定义 2D 缩放转换，改变元素的高度。

　　　　rotate(angle)：定义 2D 旋转，在参数中规定角度。deg 角度  rad 弧度。

　　　　skew(x-angle,y-angle)：定义 2D 倾斜转换，沿着 X 和 Y 轴。

　　　　skewX(angle)：定义 2D 倾斜转换，沿着 X 轴。

　　　　skewY(angle)：定义 2D 倾斜转换，沿着 Y 轴。

      具体使用我在GitHub上面有详细的例子展示，地址如下：

     　　 https://github.com/nation-blue/2D-3D

 

      2D转换 – transform

      定义3D，主要是要有3D场景，建立3D场景需要以下两个属性：

            perspective：定义透视点的深度

            perspective-origin：观察者的位置，观察原点，默认是center

      设置好以上两个属性后，3D的场景就建立好了。

      　　transform-origin：转换坐标轴中心点，可以是left、right、bottom、top、px、%，2D属性后面是两个值，3D属性的后面是三个值。

　　　　matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。

　　　　translate3d(x,y,z)：定义 3D 转化。

　　　　translateX(x)：定义 3D 转化，仅使用用于 X 轴的值。

　　　　translateY(y)：定义 3D 转化，仅使用用于 Y 轴的值。

　　　　translateZ(z)：定义 3D 转化，仅使用用于 Z 轴的值。

　　　　scale3d(x,y,z)：定义 3D 缩放转换。

　　　　scaleX(x)：定义 3D 缩放转换，通过给定一个 X 轴的值。

　　　　scaleY(y)：定义 3D 缩放转换，通过给定一个 Y 轴的值。

　　　　scaleZ(z)：定义 3D 缩放转换，通过给定一个 Z 轴的值。

　　　　rotate3d(x,y,z,angle)：定义 3D 旋转。

　　　　rotateX(angle)：定义沿 X 轴的 3D 旋转。

　　　　rotateY(angle)：定义沿 Y 轴的 3D 旋转。

　　　　rotateZ(angle)：定义沿 Z 轴的 3D 旋转。

      具体使用我在GitHub上面有详细的例子展示，地址如下：

     　　https://github.com/nation-blue/2D-3D

转载于:https://www.cnblogs.com/nation-blue/p/6711655.html