主要用到了CSS3中的 transform-style: preserve-3d; filter滤镜效果; nth-child选择器, figure标签;
transform 中的rotate(旋转)、translate(移动)等。
html代码:
<h2>ONE PIECE 3D Images Gallery</h2>
<div class="container">
<div id="rotatephoto">
<figure><img src="img/rotate1.jpg" alt=""></figure>
<figure><img src="img/rotate2.jpg" alt=""></figure>
<figure><img src="img/rotate3.jpg" alt=""></figure>
<figure><img src="img/rotate4.jpg" alt=""></figure>
<figure><img src="img/rotate5.jpg" alt=""></figure>
<figure><img src="img/rotate6.jpg" alt=""></figure>
<figure><img src="img/rotate7.jpg" alt=""></fig