3D图片变换 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>Document</title>
  6 <style type="text/css">
　　/* 设置样式*/
  7 img {
  8     vertical-align: top;
  9 }
 10 .wrap {
 11     margin: 50px auto;
 12     width: 520px;
 13     height: 280px;
 14     border: 2px solid #000;
 15     position: relative;
　　　　/*给父盒子设置景深*/
 16     perspective: 800px;
 17 }
 18 #list {
 19     margin: 0;
 20     padding: 0;
 21     list-style: none;
 22     width: 520px;
 23     height: 280px;
　　　　/*设置变换样式为3D模式*/
 24     transform-style: preserve-3d;
 25     transform: translateZ(-260px) rotateY(0deg);
 26     transition: 1s;
 27 }
 28 #list li {
 29     position: absolute;
 30     left: 0;
 31     top: 0;
 32 }
　　/*依次设置角度*/
 33 #list li:nth-of-type(1) {
 34     transform: rotateY(0deg) translateZ(260px);
 35 }
 36 #list li:nth-of-type(2) {
 37     transform: rotateY(90deg) translateZ(260px);
 38 }
 39 #list li:nth-of-type(3) {
 40     transform: rotateY(180deg) translateZ(260px);
 41 }
 42 #list li:nth-of-type(4) {
 43     transform: rotateY(270deg) translateZ(260px);
 44 }
 45 input {
 46     position: absolute;
 47     top: 120px;
 48     width: 40px;
 49     height: 40px;
 50     border: 1px solid #ccc;
 51 }
 52 input:nth-of-type(1) {
 53     left: -100px;
 54 }
 55 input:nth-of-type(2) {
 56     right: -100px;
 57 }
 58 </style>
 59 </head>
 60 <body>
 61 <div class="wrap">
 62     <ul id="list" style="transform: translateZ(-260px) rotateY(0deg);">
 63         <li>
 64             <!-- <a href="#"> -->
 65                 <img src="../img/TB1b_TiQVXXXXcgXpXXSutbFXXX.jpg">
 66         <!--     </a> -->
 67         </li>
 68         <li>
 69         <!--     <a href="#"> -->
 70                 <img src="../img/TB1dfhhQVXXXXbJaXXXXXXXXXXX-520-280.jpg_q90_.webp">
 71         <!--     </a> -->
 72         </li>
 73         <li>
 74             <!-- <a href="#"> -->
 75                 <img src="../img/TB1mobOQVXXXXX_XVXXSutbFXXX.jpg">
 76             <!-- </a> -->
 77         </li>
 78         <li>
 79             <!-- <a href="#"> -->
 80                 <img src="../img/TB1MrrzQVXXXXXIapXXSutbFXXX.jpg">
 81             <!-- </a> -->
 82         </li>
 83     </ul>
 84     <input type="button" value="prev" id="prev">
 85     <input type="button" value="next" id="next">
 86 </div>
 87     <script type="text/javascript">
 88     var prev = document.getElementById('prev');
 89     var next = document.getElementById('next');
 90     var n1=0;
 92     prev.onclick=function() {
　　//每点击一次旋转90度
 93         n1+=90;
 94         list.style.transform="translateZ(-260px) rotateY("+n1+"deg)";
 95         
 96     }
 97     next.onclick=function() {
 　　 //每点击一次旋转90度
 99          n1-=90;
100         list.style.transform="translateZ(-260px) rotateY("+n1+"deg)";
101         
102     }
103     </script>
104 </body>
105 </html>
posted @ 2017-05-30 16:12  catEatBird  阅读(180)  评论(0)  编辑  收藏  举报