效果图看左上角
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于CSS3的3D立方体旋转动画</title> <style> /* 3d旋转样式 */ .cub { width: 2.5rem; height: 2.5rem; position: fixed; left: 3%; top: 3.75rem; } #cube { animation: 6s spin linear infinite; height: 100%; position: absolute; transform-style: preserve-3d; width: 100%; } #cube * { display: block; height: 2.5rem; position: absolute; width: 2.5rem; cursor: pointer; } .cub:hover { width: 6.25rem; height: 6.25rem; } .cub:hover #cube * { width: 6.25rem; height: 6.25rem; } #cube *:before { content: ''; height: 100%; position: absolute; width: 100%; } .cub:hover #back { transform: rotateX(180deg) translateZ(5rem); } .cub:hover #front { transform: rotateY(0deg) translateZ(5rem); } .cub:hover #bottom { transform: rotateX(-90deg) translateZ(5rem); } .cub:hover #left { transform: rotateY(-90deg) translateZ(5rem); } .cub:hover #right { transform: rotateY(90deg) translateZ(5rem); } .cub:hover #top { transform: rotateX(90deg) translateZ(5rem); } /* */ #back { transform: rotateX(180deg) translateZ(1.875rem); } #front { transform: rotateY(0deg) translateZ(1.875rem); } #bottom { transform: rotateX(-90deg) translateZ(1.875rem); } #left { transform: rotateY(-90deg) translateZ(1.875rem); } #right { transform: rotateY(90deg) translateZ(1.875rem); } #top { transform: rotateX(90deg) translateZ(1.875rem); } @keyframes spin { 0% { transform: translateZ(6.25rem) rotateX(0) rotateY(0deg); } 100% { transform: translateZ(6.25rem) rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <!-- 3d旋转图片div --> <div class="cub"> <ul id="cube"> <li id="back"> <img src=" "> </li> <li id="bottom"> <img src=" "> </li> <li id="front"> <img src=" "> </li> <li id="left"> <img src=" "> </li> <li id="right"> <img src=" "> </li> <li id="top"> <img src=" "> </li> </ul> </div> </body> </html>
个人学习，内容简略。