<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>魔方</title> <style type="text/css"> body{ height: 100vh; width: 100vw; /* background-image: url(../img/rubick.jpeg); */ margin: 0; padding: 0; } #cube{ width: 300px; height: 300px; position: absolute; top: 50%; margin-top: -150px; left: 50%; margin-left: -150px; transform-style: preserve-3d; animation: run 10s linear infinite; } #cube > div{ width: 300px; height: 300px; position: absolute; opacity: 0.7; } #box1{ background-color: green; transform:rotateX(90deg) translateZ(150px); } #box2{ background-color: red; transform:rotateX(-90deg) translateZ(150px); } #box3{ background-color: blue; transform:rotateY(90deg) translateZ(150px); } #box4{ background-color: yellow; transform:rotateY(-90deg) translateZ(150px); } #box5{ background-color: pink; transform:translateZ(-150px); } #box6{ background-color: orange; transform:translateZ(150px); } @keyframes run{ from{ transform: rotateX(0) rotateY(0); } to{ transform: rotateX(360deg) rotateY(360deg); } } div img{ width: 300px; height: 300px; } </style> </head> <body> <div id="cube"> <div id="box1"> <img src="../img/1.jpg" > </div> <div id="box2"> <img src="../img/2.jpg" > </div> <div id="box3"> <img src="../img/3.jpg" > </div> <div id="box4"> <img src="../img/4.jpg" > </div> <div id="box5"> <img src="../img/5.jpg" > </div> <div id="box6"> <img src="../img/6.jpg" > </div> </div> </body> </html>
效果图：
