指定对象的 3D 旋转角度
前三个参数分别代表旋转的方向 x,y,z,第四个参数表示旋转的角度,参数不允许省略
前三个参数只有三个取值效果:正数,0,负数
如果多个方向发生改变,小数会代表在这个方向的旋转程度,最小小数取值为 0.1
指定对象 Z 轴的平移(更多用于遮罩)
z 值不能省略
指定对象的 3D 位移
第一个参数对应 X 轴,第二个对应 Y 轴,第三个对应 Z 轴,参数不允许省略
指定对象的 Z 轴缩放
参数对应 Z 轴,不允许省略
指定对象的 3D 缩放
参数不允许省略
指定观察者与 XOY 平面(也就是屏幕)的距离,使具有三维位置变换的元素产生透视效果
指定透视点的位置
x-axis:50%
y-axis:50%
具体步骤如下:
一、立方体结构中,使用一个wrapper div来包裹立方体。在里面使用6个div来制作立方体的6个面。
二、立方体的每一个面都有它自己的元素。我们稍后会使用CSS来将立方体的6个面放置到正确的位置上。
三、在立方体的CSS样式中,首先要关注的是立方体的wrapper div。为了制作3D效果,我们需要为它提供一个 CSS perspective。
四、CSS perspective属性是一个比较复杂的CSS3属性。最好的理解它的方法是看完文档后,自己动手修改一下DEMO中的perspective属性来看看它的变化。
下面需要给包含立方体6个面的立方体的容器.cube提供样式:
1、.cube {
position: relative
width: 200px
transform-style: preserve-3d
2、给立方体容器200像素的宽度,并设置为相对定位,这样在它里面的立方体的6个面可以设置为绝对定位。
3、preserve-3d属性确保所有6个面都处于3D立体状态。
4、在为6个面设置它们的位置之前,先给它们一些通用的样式:
.cube div {
position: absolute
width: 200px
height: 200px
}
5、在进过上面对立方体6个面的一系列设置之后,现在我们可以为6个面制作变形效果,以使它们组装为一个立方体。
6、rotateY的值可以旋转立方体的各个面,使上面的文字处于正确的位置上。
7、而 translateZ 的值使元素在指定容器中向前或向后移动。translateY的值看起来有些混乱,但是请记住,它的作用是通过透明的面板来使指定的面升高或降低来制作3D效果。
8、每一个面都有自己的translations值来使它们处于适当的位置上。你可以自己修改一下这些值来看看效果。