第102天：CSS3實現立方體旋轉
阿新 • • 發佈：2017-12-03
right https mes abs absolute 變換 class type auto
CSS3實現立方體旋轉
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>立方體旋轉</title> 6 <style> 7 .box{ 8 width: 250px; 9 height: 250px; 10 border: 1px dashed red; 11 margin:100px auto; 12 position: relative; 13 transform-style: preserve-3d; 14 border-radius: 50%; 15 /*transform: rotateX(30deg) rotateY(-30deg);*/ 16 17 animation: gun 8s linear infinite; 18 } 19 .box>div{ 20 width: 100%; 21height: 100%; 22 position: absolute; 23 text-align: center; 24 line-height: 250px; 25 font-size: 60px; 26 color: green; 27 } 28 .left{ 29 background-color: rgba(255,0,0,0.3); 30 /*變換中心*/ 31 transform-origin: left; 32 /*變換*/ 33 transform:rotateY(90deg) translateX(-125px); 34 } 35 .right{ 36 background-color: rgba(0,0,255,0.3); 37 transform-origin: right; 38 transform: rotateY(90deg) translateX(125px); 39 } 40 .forward{ 41 background-color: rgba(0,255,255,0.3); 42 transform: translateZ(125px); 43 } 44 .back{ 45 background-color: rgba(255,255,0,0.3); 46 transform: translateZ(-125px); 47 } 48 .up{ 49 background-color: rgba(99,66,33,0.3); 50 transform: rotateX(90deg) translateZ(125px); 51 } 52 .down{ 53 background-color: rgba(255,0,255,0.3); 54 transform: rotateX(-90deg) translateZ(125px); 55 } 56 @keyframes gun { 57 0%{ 58 transform: rotateX(0deg) rotateY(0deg); 59 } 60 100%{ 61 transform: rotateX(360deg) rotateY(360deg); 62 } 63 } 64 </style> 65 </head> 66 <body> 67 <div class="box"> 68 <div class="up">上</div> 69 <div class="down">下</div> 70 <div class="left">左</div> 71 <div class="right">右</div> 72 <div class="forward">前</div> 73 <div class="back">後</div> 74 </div> 75 </body> 76 </html>
運行效果：
第102天：CSS3實現立方體旋轉