CSS實現一個旋轉的正方體,鼠標放上去會自動解體.比較普通的實現,留個記錄.(代碼裏的註釋方式寫錯了)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 600px; height: 600px; margin: 0 auto; transform-style: preserve-3d; position: relative; animation: run 5s linear infinite; //旋轉動畫 } @keyframes run { 0%{ //旋轉動畫的開始幀 } 100%{ transform: rotateY(360deg) rotateX(360deg);//旋轉動畫的結束幀 } } div { transition:1s;//設置div變換的時間 } .box div { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; line-height: 200px; text-align: center; font-size: 50px; color: whitesmoke; opacity: 0.5;//透明度 } .box div:nth-child(1) { background: #F44336; transform: translateZ(100px); } .box div:nth-child(2) { background: #9C27B0; transform: translateX(-100px) rotateY(-90deg); } .box div:nth-child(3) { background: #3F51B5; transform: translateY(-100px) rotateX(90deg); } .box div:nth-child(4) { background: #4CAF50; transform: translateY(100px) rotateX(-90deg); } .box div:nth-child(5) { background: #FDD835; transform: translateX(100px) rotateY(90deg); } .box div:nth-child(6) { background: #455A64; transform: translateZ(-100px); } </style> </head> <body> <div class="box" onmouseover="showsome()" onmouseout="goback()"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> <script> function showsome(){ var divs = document.getElementsByClassName('box')[0].children divs[0].style.transform='translateZ(200px) ' divs[1].style.transform='translateX(-200px) rotateY(-90deg)' divs[2].style.transform='translateY(-200px) rotateX(90deg)' divs[3].style.transform='translateY(200px) rotateX(-90deg) ' divs[4].style.transform='translateX(200px) rotateY(90deg)' divs[5].style.transform='translateZ(-200px)' } function goback(){ var divs = document.getElementsByClassName('box')[0].children divs[0].style.transform='translateZ(100px) ' divs[1].style.transform='translateX(-100px) rotateY(-90deg)' divs[2].style.transform='translateY(-100px) rotateX(90deg)' divs[3].style.transform='translateY(100px) rotateX(-90deg) ' divs[4].style.transform='translateX(100px) rotateY(90deg)' divs[5].style.transform='translateZ(-100px)' } </script> </html>