1
2
3
4
5
6
1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 .box{ 7 width: 200px; 8 height: 200px; 9 position: relative; 10 margin: 100px auto ; 11 transform-style: preserve-3d; 12 transform: rotateY(30deg) rotateX(30deg); 13 animation: mymove 10s linear; 14 } 15 .inner{ 16 width: 200px; 17 height: 200px; 18 position: absolute; 19 font: 900 30px/200px "楷体" ; 20 text-align: center; 21 color: white; 22 opacity: 0.9; 23 } 24 /*现移动后旋转*/ 25 .inner:first-child{ 26 background-color: burlywood; 27 transform: translateY(100px) rotateX(90deg); 28 } 29 .inner:nth-child(2){ 30 background-color: #B0FFCA; 31 transform: translateY(-100px) rotateX(-90deg); 32 } 33 .inner:nth-child(3){ 34 background-color: rosybrown; 35 transform: translateX(-100px) rotateY(-90deg); 36 } 37 .inner:nth-child(4){ 38 background-color: #FFB2E4; 39 transform: translateX(100px) rotateY(90deg); 40 } 41 .inner:nth-child(5){ 42 background: cornflowerblue; 43 transform: translateZ(100px) ; 44 } 45 .inner:nth-child(6){ 46 background-color: deepskyblue; 47 transform: translateZ(-100px) rotateY(180deg) ; 48 } 49 @keyframes mymove { 50 0%{ 51 transform: rotateY(60deg) rotateX(60deg); 52 } 53 10%{ 54 transform: rotateY(120deg) rotateX(120deg); 55 } 56 20%{ 57 transform: rotateY(180deg) rotateX(180deg); 58 } 59 30%{ 60 transform: rotateY(180deg) rotateX(240deg); 61 } 62 40%{ 63 transform: rotateY(180deg) rotateX(240deg); 64 } 65 50%{ 66 transform: rotateY(120deg) rotateX(300deg); 67 } 68 60%{ 69 transform: rotateY(120deg) rotateX(360deg); 70 } 71 70%{ 72 transform: rotateY(180deg) rotateX(360deg); 73 } 74 80%{ 75 transform: rotateY(240deg) rotateX(420deg); 76 } 77 90%{ 78 transform: rotateY(300deg) rotateX(420deg); 79 } 80 100%{ 81 transform: rotateY(420deg) rotateX(420deg); 82 } 83 } 84 </style> 85 <div class="box"> 86 <div class="inner">1</div> 87 <div class="inner">2</div> 88 <div class="inner">3</div> 89 <div class="inner">4</div> 90 <div class="inner">5</div> 91 <div class="inner">6</div> 92 </div>