3D 转换

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

    主要有下列方法：

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

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

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

    rotateY()

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

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

    rotate3d()

    • x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
    • 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)

    例子

    源码