1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 html{ 9 perspective: 800px; 10 } 11 12 @keyframes round{ 13 from{transform: rotateX(0deg) rotateY(0deg);} 14 to{transform: rotateX(360deg) rotateY(360deg);} 15 } 16 17 .cube{ 18 width: 200px; 19 height: 200px; 20 margin: 150px auto; 21 22 /* 23 默认情况下，元素的变形都属于2d变形，没有应用3d效果 24 transform-style: preserve-3d; 开启元素的3d变形 25 */ 26 transform-style: preserve-3d; 27 /* transition: all 2s; */ 28 29 animation: round 20s linear infinite; 30 } 31 32 /* .cube:hover{ 33 transform: rotateX(45deg) rotateY(45deg); 34 } */ 35 36 img{ 37 vertical-align: top; 38 } 39 40 .cube div{ 41 transition: all 1s; 42 /* 开启绝对定位 */ 43 position: absolute; 44 /* 设置图片的透明 */ 45 opacity: .8; 46 } 47 48 .cube div:nth-child(1){ 49 transform: rotateY(90deg) translateZ(100px); 50 } 51 52 .cube div:nth-child(2){ 53 transform: rotateY(-90deg) translateZ(100px); 54 } 55 56 .cube div:nth-child(3){ 57 transform: rotateX(-90deg) translateZ(100px); 58 } 59 60 .cube div:nth-child(4){ 61 transform: rotateX(90deg) translateZ(100px); 62 } 63 64 .cube div:nth-child(5){ 65 transform: rotateY(180deg) translateZ(100px); 66 } 67 68 .cube div:nth-child(6){ 69 transform: translateZ(100px); 70 } 71 72 73 </style> 74 </head> 75 <body> 76 <div class="cube"> 77 <div> 78 <img src="img/1.jpg"> 79 </div> 80 81 <div> 82 <img src="img/2.jpg"> 83 </div> 84 85 <div> 86 <img src="img/3.jpg"> 87 </div> 88 89 <div> 90 <img src="img/4.jpg"> 91 </div> 92 93 <div> 94 <img src="img/5.jpg"> 95 </div> 96 97 <div> 98 <img src="img/6.jpg"> 99 </div> 100 </div> 101 </body> 102 </html>
效果
内容
1.元素旋转后，x轴，y轴，z轴会发生变化，往那边旋转那边就为正面