css立体3D的使用

CSS立体3D的使用

使用3D转换来对元素进行变化

方法

rotateX()：围绕x轴进行旋转，单位为度数deg。为正值时向前旋转，为负值向后旋转。
rotateY()：围绕y轴进行旋转，单位为度数deg。为正值时向前旋转，为负值向后旋转。

浏览器支持

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

转换属性

一个简单的表格是这么创建的：

属性	描述
persective	设置透视效果，属性定义3D元素距离师徒的距离，以像素计
opacity	不透明度，值越小越透明，值范围在0-1之间
trasform	向元素应用2D或3D转换

注意

3d旋转：元素绕轴旋转后，x、y、z轴也旋转
元素不论怎么转动，y轴始终都在“高度”上；x轴始终都在“宽度”上；z轴始终与x轴和y轴垂直。