3D圖片變換
阿新 • • 發佈：2017-05-30
border xxxxxxxx src text har reserve 點擊 ctype posit
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>
3D圖片變換