body{ background-color: #000; margin: 0; padding: 0; } main{ perspective: 800px; } .cube{ transform-style: preserve-3d; position: relative; margin: 200px auto 0px; width: 400px; height: 400px; animation: spin 8s linear infinite; animation-play-state: paused; } .cube>div{ background-color: blue; opacity: 0.3; position: absolute; outline: 3px solid #0af; width: 400px; height:400px; } .cube>div:nth-child(1){ transform: translateZ(200px); } .cube>div:nth-child(2){ transform: rotateY(180deg) translateZ(200px); } .cube>div:nth-child(3){ transform: rotateY(90deg) translateZ(200px); } .cube>div:nth-child(4){ transform: rotateY(-90deg) translateZ(200px); } .cube>div:nth-child(5){ transform: rotateX(90deg) translateZ(200px); } .cube>div:nth-child(6){ transform: rotateX(-90deg) translateZ(200px); } @keyframes spin{ 100%{transform: rotateY(-360deg);} } .cube:hover{ animation-play-state: running; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>纯 CSS 制作绕中轴旋转的立方体</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div class="cube"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </main> </body> </html>
划重点
①给多个元素absolute形成重叠
②transform: rotateY(180deg) translateZ(200px);和transform: translateZ(200px) rotateY(180deg);
先后的不同，有巨大区别！
.cube>div:nth-child(1){ transform: translateZ(200px); } .cube>div:nth-child(2){ transform: rotateY(180deg) translateZ(200px); } .cube>div:nth-child(3){ transform: rotateY(90deg) translateZ(200px); } .cube>div:nth-child(4){ transform: rotateY(-90deg) translateZ(200px); } .cube>div:nth-child(5){ transform: rotateX(90deg) translateZ(200px); } .cube>div:nth-child(6){ transform: rotateX(-90deg) translateZ(200px); }
先在中点进行旋转，随后分别向各自变化后的Z方向推进200px；
而不是集体推进200px后在中点进行旋转。
③margin:200px auto 0px;
④3D舞台元素对视角的作用决定性（一个类似body的大背景座位舞台元素起到对屏幕更真实的效果）
⑤
animation: name duration timing-function delay iteration-count direction;
animation-play-state: paused;
animation-play-state: running;
@keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
.cube:hover{ animation-play-state: running; }