css3立體迴圈旋轉
阿新 • • 發佈：2018-11-06
圖片：
方法一：通過轉動父元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 3D轉換</title> <style> body { margin: 0; padding: 0; background-color: #B3C04C; } .wallet { width: 300px; height: 300px; margin: 50px auto; position: relative; transform-style: preserve-3d; animation: spin 4s linear infinite; } .wallet::before, .wallet::after { display: block; content: ''; width: 100%; height: 100%; border-radius: 150px; } .wallet::before { background: url(./images/bg.png) left top; transform: rotateY(180deg); } .wallet::after { transform: translateZ(1px); position: absolute; left: 0; top: 0; background: url(./images/bg.png) right top; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } </style> </head> <body> <div class="wallet"></div> </body> </html>
方法二：通過轉動子元素（backface-visibility: hidden;不顯示背面，當一個轉到背面的時候顯示另一個的正面，所以要錯開時間旋轉，這裡提前了2s，如果是推遲2s的話會中間有2s是空白）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 3D轉換</title> <style> body { margin: 0; padding: 0; background-color: #B3C04C; } .wallet { width: 300px; height: 300px; margin: 50px auto; position: relative; transform-style: preserve-3d; } .wallet::before { transform: rotateY(180deg); background: url(./images/bg.png) left top; } .wallet::after { background: url(./images/bg.png) right top; } .wallet::before, .wallet::after { display: block; content: ''; width: 100%; height: 100%; border-radius: 150px; position: absolute; left: 0; top: 0; backface-visibility: hidden; } .wallet::before { animation: spin 4s linear infinite -2s; } .wallet::after { animation: spin 4s linear infinite; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } </style> </head> <body> <div class="wallet"></div> </body> </html>
效果：
這是個gif。不知道為啥上傳上來動不了。。。。