<html> <head> <title>H5立方</title> <meta charset="utf-8"> <style> html{ height: 100%; background: radial-gradient(circle, #333, #000, #000); } body{ height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; perspective: 1500px; } main { width: 300px; height: 300px; transform-style: preserve-3d; animation: 10s spin linear infinite; } main div { position: absolute; width: 100%; height: 100%; background-size: 100%; border: 1px solid black; } .font { background-image: url(1.jpg); transform: translateZ(150px); } .back { background-image: url(2.jpg); transform: translateZ(-150px); } .left { background-image: url(3.jpg); transform: rotateY(90deg) translateZ(-150px); } .right { background-image: url(4.jpg); transform: rotateY(90deg) translateZ(150px); } .top { background-image: url(5.jpg); transform: rotateX(90deg) translateZ(-150px); } .bottom { background-image: url(6.jpg); transform: rotateX(90deg) translateZ(150px); } @keyframes spin { 0% { transform: rotateX(0) rotateY(0); } 100% { transform: rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <main> <div class="font"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </main> </body></html>
评论