任务一　旋转的立方体

任务一　旋转的立方体

任务要求

（1）新建文件2501.html。

（2）对一个240*240大盒子，设置透视效果800px。

（3）结构用无序列表，即6个li200*200，为正方体的六个面，对其设置不同背景色。

（4）用绝对定位把六个面合在一起。

（5）li的父元素ul大小为200*200，并添加transform-style：preserve-3d；设置子元素显示3D效果。

（6）用动画+旋转制作拼合效果。

拼好后的立方体自动沿Y轴旋转，鼠标移入时，停止运动，如图25.1.1所示，其CSS样式部分如图25.1.2所示，HTML结构部分如图25.1.3所示。

图25.1.1　旋转的立方体

图25.1.2　旋转的立方体CSS样式部分

图25.1.3　旋转的立方体HTML结构部分