先上效果:
HTNL+CSS:旋转的正方体相册
重点难点
1.浏览器表示的坐标轴是怎样的?
提示:可以想象天花板角落。向下的方向表示Y轴。
2.在第一个难点的基础上,我们就需要知道怎样通过旋转,位置将六个平面拼成正方体。
提示:沿X轴旋转并上下位移可以得到正方体的上下面,沿Y轴旋转并位移我们就得到了左右面,前后面只需要位移就可以了。
3.使用animation属性是我们得到的正方体动起来。
HTML代码:
<body>
<!-- 第一步:创建画布 -->
<div class="wrap">
<!-- 第二步:创建一个盒子,容纳正方体的六个面 -->
<div class="box">
<!-- 第三步:使用包含图片的div表示正方体的六个面 -->
<div class="left"><img src="imgs/6-14-1.jpg" alt=""></div>
<div class="right"><img src="imgs/6-14-2.jpeg"<