css實現方塊立體旋轉效果
效果預覽：
html程式碼：
</head> <body> <div class="cube"> //把這裡的檔案替換為自己的圖片即可 <div class="box1"> <img src="./1.png"> </div> <div class="box2"> <img src="./2.png"> </div> <div class="box3"> <img src="./3.png"> </div> <div class="box4"> <img src="./4.png"> </div> <div class="box5"> <img src="./5.png"> </div> <div class="box6"> <img src="./6.png"> </div> </div> </body>
css程式碼：
html { perspective: 800px; } .cube{ width: 200px; height: 200px; /* background-color: #bfa; */ margin: 100px auto; transform-style: preserve-3d; /* transform: rotateX(45deg) rotateZ(45deg); */ animation: rotate 20s infinite linear; } .cube>div { width: 200px; height: 200px; opacity: 0.8; position: absolute; } img{ vertical-align: top; width: 200px; height: 200px; } .box1{ transform: rotateY(90deg) translateZ(100px); } .box2 { transform: rotateY(-90deg) translateZ(100px); } .box3 { transform: rotateX(90deg) translateZ(100px); } .box4 { transform: rotateX(-90deg) translateZ(100px); } .box5 { transform:rotateY(180deg) translateZ(100px); } .box6 { transform: rotateY(0deg) translateZ(100px); } @keyframes rotate{ from{ transform: rotateX(0) rotateZ(0); } to{ transform: rotateX(1turn) rotateZ(1turn); } }