• 3D 转换
    • rotateX()
    • rotateY()
    • rotateZ()
    • rotate3d()
    • 转换方法
    • 源码
    • 参考

    3D 转换

    CSS3 3D Transform,用于 3 维动画或旋转。

    CSS3 3D 转换是一个属性,用于改变元素的实际形式。这个特性可以改变元素的形状、大小和位置。

    主要有下列方法：

    • rotateX()
    • rotateY()
    • rotateZ()

    注意：Internet Explorer 10 和 Firefox 支持 3D 转换；
    Chrome 和 Safari 必须添加前缀 -webkit-；
    Opera 还不支持 3D 转换(支持 2D 转换 )

    3D - 图1

    rotateX()

    rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

    1. .rotate-x {
    2.     transform: rotateX(60deg);
    3.     -webkit-transform: rotateX(120deg); /* Safari and Chrome */
    4. }

    rotateY()

    rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

    1. .rotate-y {
    2.     transform: rotateY(60deg);
    3.     -webkit-transform: rotateY(120deg); /* Safari and Chrome */
    4. }

    rotateZ()

    rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。

    1. .rotate-z {
    2.     transform: rotateZ(60deg);
    3.     -webkit-transform: rotateY(120deg); /* Safari and Chrome */
    4. }

    rotate3d()

    otate3d(x,y,z,a)中取值说明：

    • x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
    • y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
    • z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

    • a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
      面介绍的三个旋转函数功能等同：

    • rotateX(a)函数功能等同于rotate3d(1,0,0,a)

    • rotateY(a)函数功能等同于rotate3d(0,1,0,a)
    • rotateZ(a)函数功能等同于rotate3d(0,0,1,a)

    例子

    1. .rotate-3d {
    2.     transform: rotate3d(0,0.6,0.2,60deg);
    3.     -webkit-transform: rotate3d(0.6,0.6,0.2,60deg); /* Safari and Chrome */
    4. }

    转换方法

    函数 描述
    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 旋转。
    perspective(n) 定义 3D 转换元素的透视视图。

    源码

    本文中所用例子源码参见
    https://github.com/waylau/css3-tutorial 中 samples 目录下的 3d_transform.html

    参考

    • http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
    • http://www.w3cplus.com/css3/css3-3d-transform.html