css 利用animation和transform 设置复仇者魔方

  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轴会发生变化，往那边旋转那边就为正面