css3实现一个有趣的海贼王人物3d旋转相册-蒲公英云

css3实现一个有趣的海贼王人物3d旋转相册

主要用到了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=""></figure>
                <figure><img src="img/rotate8.jpg" alt=""></figure>
                <figure><img src="img/rotate9.jpg" alt=""></figure>
             </div>
        </div>

css代码：

$gif.latex$

<style type="text/css">
          *{   margin: 0;   padding: 0;   outline: none;    border: none;   box-sizing: border-box; }
          html,body{     min-height: 100%;   }
          body{ background-image: radial-gradient(mintcream 0%, lightgray 100%);  }
          h2{
              display: table;
              margin: 5% auto 0;
              text-transform: uppercase;            /* uppercase定义只有大写字母  */
              font-family: "Times New Roman",Georgia,Serif;
              font-size: 3em;
              font-weight: 500;
              text-shadow: 0 1px white, 0 3px blue;
          }
          .container{
              width: 360px;
              height: 250px;
              position: relative;
              margin: 5% auto;
              perspective: 1000;
          }
          #rotatephoto{
              width: 100%;
              height: 100%;
              position: absolute;
              transform-style: preserve-3d;
              animation: rotation 20s infinite linear;
          }
          #rotatephoto:hover{
              animation-play-state: paused;
          }
          #rotatephoto figure{
              display: block;
              position: absolute;
              width: 350px;
              height: 188px;
              left: 10px;
              top: 10px;
              background: black;
              overflow: hidden;
              border: 5px solid black;
          }
          #rotatephoto figure:nth-child(1){  transform:  rotateY(0deg) translateZ(500px);}
          #rotatephoto figure:nth-child(2){  transform:  rotateY(40deg) translateZ(500px);}
          #rotatephoto figure:nth-child(3){  transform:  rotateY(80deg) translateZ(500px);}
          #rotatephoto figure:nth-child(4){  transform:  rotateY(120deg) translateZ(500px);}
          #rotatephoto figure:nth-child(5){  transform:  rotateY(160deg) translateZ(500px);}
          #rotatephoto figure:nth-child(6){  transform:  rotateY(200deg) translateZ(500px);}
          #rotatephoto figure:nth-child(7){  transform:  rotateY(240deg) translateZ(500px);}
          #rotatephoto figure:nth-child(8){  transform:  rotateY(280deg) translateZ(500px);}
          #rotatephoto figure:nth-child(9){  transform:  rotateY(320deg) translateZ(500px);}
          img{
              -webkit-filter: grayscale(1);     /* filter滤镜 */
              cursor: pointer;
              transition: all 0.8s ease;
          }
          img:hover{
              -webkit-filter: grayscale(0);
              transform: scale(1.3, 1.3);       /* scale缩放 */
          }
          @keyframes rotation{
              0%{
                  transform: rotateY(0deg);
              }
              100%{
                  transform: rotateY(360deg);
              }
          }
    </style>