css 旋轉立方體
阿新 • • 發佈：2021-06-20
1.需要了解相關css樣式
1.position屬性 值：relative\absolute; /* position進行定位，父元素的position屬性值為relative相對定位，子元素的position屬性值為absolute相對定位*/ position:relative; position:absolute; 2.transform-style屬性 值：flat\preserve-3d; /* transform-style在3d的情況下是否以3d的方式呈現，值flat子元素不保留3d的位置，preserve-3d子元素保留3d位置，呈現3d形式*/ transform-style:preserve-3d; 3.perspective屬性 值：number\none; /* 當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身，perspective 屬性隻影響 3D 轉換元素 */ perspective:600; 4.動畫animation屬性 /* animation: 動畫的名稱 完成動畫的時間 動畫的速度 迴圈播放*/ animation: rotate 4s liner infinite; /*定義關鍵幀@keyframes 動畫的名字*/ @keyframes rotate{ 0%{ transform: rotateX(0deg) rotateY(0deg); } 100%{ transform: rotateX(360deg) rotateY(360deg); } } 5.nth-child(n)選擇器； .box:nth-child(2); /*選擇第二個.box*/ 6.transition屬性 /*過渡屬性 完成過渡的時間*/ transition：0.5s； 7.transform屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 transform:rotate();/*定義2d旋轉角度*/ transform:rotateX(90deg);/沿著X軸旋轉90度，定義3d旋轉*/ transform:rotateY(90deg);/沿著X軸旋轉90度，定義3d旋轉*/ translateX(x)/*定義轉換，只是用 X 軸的值。*/ translateY(y)/*定義轉換，只是用 Y 軸的值。*/ translateZ(z)/*定義 3D 轉換，只是用 Z 軸的值。*/
效果顯示
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background-color: #4b8bf4; } .wrap{ width: 200px; height: 200px; position: relative; margin: 150px auto; transform-style:preserve-3d; animation: rotate 4s linear infinite; perspective: 600; } .box{ width: 200px; height: 200px; position: absolute; transition: 0.5s; } .box:nth-child(1){ background: url(./img/1.jpg); transform: rotateX(90deg) translateZ(100px); } .box:nth-child(2){ background: url(./img/2.jpg); transform: rotateX(90deg) translateZ(-100px); } .box:nth-child(3){ background: url(./img/3.jpg); transform: rotateY(90deg) translateZ(100px); } .box:nth-child(4){ background: url(./img/4.jpg); transform: rotateY(90deg) translateZ(-100px); } .box:nth-child(5){ background: url(./img/5.jpg); transform: translateZ(100px); } .box:nth-child(6){ background: url(./img/6.jpg); transform: translateZ(-100px); } @keyframes rotate { 0%{ transform: rotateX(0deg) rotateY(0deg); } 100%{ transform: rotateX(360deg) rotateY(360deg); } } .wrap:hover .box:nth-child(1){ transform: rotateX(90deg) translateZ(200px); } .wrap:hover .box:nth-child(2){ transform: rotateX(90deg) translateZ(-200px); } .wrap:hover .box:nth-child(3){ transform: rotateY(90deg) translateZ(200px); } .wrap:hover .box:nth-child(4){ transform: rotateY(90deg) translateZ(-200px); } .wrap:hover .box:nth-child(5){ transform:translateZ(200px); } .wrap:hover .box:nth-child(6){ transform:translateZ(-200px); } .bot{ width: 80px; height: 80px; position: absolute; top: 50%; margin-top: -40px; left: 50%; margin-left: -40px; } /* ?為什麼從7開始，:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的型別。*/ .bot:nth-child(7){ background: url(./img/7.jpg); transform: rotateX(90deg) translateZ(40px) ; } .bot:nth-child(8){ background: url(./img/7.jpg); transform: rotateX(90deg) translateZ(-40px) ; } .bot:nth-child(9){ background: url(./img/7.jpg); transform: rotateY(90deg) translateZ(40px); } .bot:nth-child(10){ background: url(./img/7.jpg); transform: rotateY(90deg) translateZ(-40px); } .bot:nth-child(11){ background: url(./img/7.jpg); transform: translateZ(40px); } .bot:nth-child(12){ background: url(./img/7.jpg); transform: translateZ(-40px); } </style> </head> <body> <div class="wrap"> <!-- 外層大盒子 --> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <!-- 內小盒子 --> <span class="bot"></span> <span class="bot"></span> <span class="bot"></span> <span class="bot"></span> <span class="bot"></span> <span class="bot"></span> </div> </body> </html>