<<web>>3d 相册

来源：互联网发布：软件资格考试怎么报名? 编辑：程序博客网时间：2024/04/30 02:23

这里写图片描述
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); }

0 0