<div class="wrap"> <div class="box box1"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box box2"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box box3"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box box4"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box box5"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box box6"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> <style> .wrap{ position: relative; transform-style: preserve-3d; transform-origin: center center; transform: rotateX(-30deg) rotateY(-80deg); width: 198px; height: 198px; margin: 200px auto; } .wrap:hover{ animation: myfirst 8s; } @keyframes myfirst { 0% {transform: rotateX(-30deg) rotateY(-80deg);} 25% {transform: rotateX(360deg) rotateY(-120deg);} 50% {transform: rotateY(-30deg) rotateY(-60deg);} 100% {transform: rotateY(-360deg) rotateY(-80deg);} } .box{ position: absolute; left: 0; top: 0; width: 198px; height: 198px; } .box div{ float: left; width: 60px; height: 60px; background-color: red; border: solid 1px #666; margin: 2px; box-shadow: 0 1px 2px rgba(0,0,0, 0.3); border-radius: 5px; } .box1{ transform: rotateY(90deg) translateZ(99px); } .box1>div{ background-color: red; } .box2{ transform: rotateY(90deg) translateZ(-99px); } .box2>div{ background-color: green; } .box3{ transform: rotateX(90deg) translateZ(99px); } .box3>div{ background-color: blue; } .box4{ transform: rotateX(90deg) translateZ(-99px); } .box4>div{ background-color: yellow; } .box5{ transform: rotateX(0deg) translateZ(-99px); } .box5>div{ background-color: palegreen; } .box6{ transform: rotateX(0deg) translateZ(99px); } .box6>div{ background-color: aqua; } </style>
标签:rotateY,color,魔方,transform,rotateX,案例,background,div From: https://www.cnblogs.com/book-student/p/16775120.html