3D 转换_CSS3 教程

CSS3 3D Transform,用于 3 维动画或旋转。CSS3 3D 转换是一个属性,用于改变元素的实际形式。这个特性可以改变元素的形状、大小和位置。主要有下列方法：rotateX，rotateY，rotateZ。注意：Internet Explorer 10 和 Firefox 支持 3D 转换； Chrome 和 Safari 必须添加前缀 -webkit-； Opera 还不支持 3D 转换(支持 2D 转换 )

rotateX

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

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

rotateY

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

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

rotateZ

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

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

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)

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

转换方法

函数	描述
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

参考

下一节：CSS 是 Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。