<>3d 相册

<<web>>3d 相册_第1张图片
1,html

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <link href="D:/test/css/css.css" rel="stylesheet" type="text/css">
   <title></title>
  </head>
 <body>
  <div class="wutai">
    <div class="rongqi">
      <img src="D:/test/images/1.jpg"/>
      <img src="D:/test/images/1.jpg"/>
      <img src="D:/test/images/1.jpg"/>
      <img src="D:/test/images/1.jpg"/>
      <img src="D:/test/images/1.jpg"/>
      <img src="D:/test/images/1.jpg"/>
      <img src="D:/test/images/1.jpg"/>
      <img src="D:/test/images/1.jpg"/>
      <img src="D:/test/images/1.jpg"/>

    </div>
  </div>
 </body>
</html>

2,css

.wutai{ margin-left:40%; perspective:1800px; -webkit-perspective: 1800px; -moz-perspective: 1800px; -ms-perspective: 1800px; -o-perspective: 1800px; }
.rongqi{ transform-style:preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; }
.rongqi img{ width:128px; position:absolute;}

img:nth-child(1) { -webkit-transform: rotateY( 0deg ) translateZ(195.839px); }
img:nth-child(2) { -webkit-transform: rotateY( 40deg )translateZ(195.839px); }
img:nth-child(3) { -webkit-transform: rotateY( 80deg )translateZ(195.839px); }
img:nth-child(4) { -webkit-transform: rotateY( 120deg )translateZ(195.839px); }
img:nth-child(5) { -webkit-transform: rotateY( 160deg )translateZ(195.839px); }
img:nth-child(6) { -webkit-transform: rotateY( 200deg )translateZ(195.839px); }
img:nth-child(7) { -webkit-transform: rotateY( 240deg )translateZ(195.839px); }
img:nth-child(8) { -webkit-transform: rotateY( 280deg )translateZ(195.839px); }
img:nth-child(9) { -webkit-transform: rotateY( 320deg )translateZ(195.839px); }

你可能感兴趣的:(<>3d 相册)