CSS Transfrom 3D

博客头部用了一个3D效果的幻灯片,它的制作其实很简单,主要分为两部分:一是在父元素上做好3D视角视距的准备,二是子元素在3D空间的位置摆放。

前期准备(父元素):
transform-style: flat | preserve-3d

flat表示子元素位于父元素平面内,preserve-3d表示子元素在3维空间内。

perspective: none | length

perspective表示z=0平面与用户之间的距离,0或负值无效。z>0的3D元素会变得更大,z<0的3D元素会变得更小。按需要设置,如果设的过小就好比自身是一只蚂蚁在看一个庞然大物,会有较大的形变,所以一般设的较大,但过大就没有意义了,可以自己按需要调节。我设的是1200px.

perspective-origin: 50% 50%(Initial value)| 百分比|长度|… 

perspective-origin决定了用户视线的焦点,被perspective用作消失点(vanishing point)。

子元素的位置摆放:

开始在做这个幻灯片的时候花了很多时间,因为算转过角度后的元素的x,y值,怎么都摆不好。后来联想到canvas里translate、rotate等移动的都是坐标系恍然大悟。每个元素都有自己的坐标,设值的时候是相对于他自己的坐标系而言的。这样一来我的幻灯片将每个元素转过相应的角度之后只需沿着各自坐标系的Z轴向前移相等的距离(我的是134.5px)。

做好了以上的两步就可以对父元素进行变化了,这里用一个定时器,每隔一段时间将Y轴转动120度,当然还可以配上自己喜欢的animation。

comments powered by Disqus