#cube{ margin: 100px auto; position: relative; width: 200px; height: 200px; border: 1px solid black; perspective: 300; -webkit-perspective: 300; perspective-origin: 150% 150%; -webkit-perspective-origin: 50% 50%; transform-style: preserve-3d; } #cube>div{ position: absolute; width: 100px; height: 100px; opacity: 0.4; text-align: center; line-height: 100px; font-size: 30px; transition: 1s; } #cube>#front{ background: red; transform: rotateX(0) translateZ(50px); } #cube>#back{ background: green; transform: rotateX(180deg) translateZ(50px); } #cube>#left{ background: gray; transform: rotateY(90deg) translateZ(50px); } #cube>#right{ background: yellow; transform: rotateY(-90deg) translateZ(50px); } #cube>#top{ background: rgb(115, 182, 221); transform: rotateX(-90deg) translateZ(50px); } #cube>#bottom{ background: rgb(52, 49, 214); transform: rotateX(90deg) translateZ(50px); } #cube{ /* transform: rotateX(40deg) translateZ(-40px); */ animation: mydhua 5s ease infinite; } @keyframes mydhua{ 0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform-origin: center center;} 100%{transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); transform-origin: center center;} } /* #cube:hover>#front{ line-height: 200px; 200px; height: 200px; background: red; transform: rotateX(0) translateZ(100px); } #cube:hover>#back{ line-height: 200px; 200px; height: 200px; background: green; transform: rotateX(180deg) translateZ(100px); } #cube:hover>#left{ line-height: 200px; 200px; height: 200px; background: gray; transform: rotateY(90deg) translateZ(100px); } #cube:hover>#right{ line-height: 200px; 200px; height: 200px; background: yellow; transform: rotateY(-90deg) translateZ(100px); } #cube:hover>#top{ line-height: 200px; 200px; height: 200px; background: rgb(115, 182, 221); transform: rotateX(-90deg) translateZ(100px); } #cube:hover>#bottom{ line-height: 200px; 200px; height: 200px; background: rgb(52, 49, 214); transform: rotateX(90deg) translateZ(100px); } */
transform-style: preserve-3d; 使得子元素当做3d元素来对待
perspective: 300;
-webkit-perspective: 300;
perspective-origin: 150% 150%;
-webkit-perspective-origin: 50% 50%;
引用代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{margin: 0;padding: 0;} html,body{height: 100%;} .wrap{ height: 100%;position: relative; transform-style:preserve-3d; animation:mydhua 5s ease infinite; } .box{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%; margin:-100px 0 0 -100px; line-height: 200px;text-align: center;font-size: 48px;color: white; } .box1{ transform:rotatey(90deg) translatez(-100px); background: rgba(128,0,128,.5); } .box2{ transform:rotatey(90deg) translatez(100px); background: rgba(255,0,255,.5); } .box3{ transform:rotatex(90deg) translatez(100px); background: rgba(255,153,204,.5); } .box4{ transform:rotatex(90deg) translatez(-100px); background: rgba(0,204,255,.5); } .box5{ transform: translatez(-100px); background: rgba(153,204,255,.5); } .box6{ transform: translatez(100px); background: rgba(0,255,255,.5); } @keyframes mydhua{ 0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform-origin: center center;} 100%{transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);transform-origin: center center; } } </style> </head> <body> <div class="wrap"> <div class="box1 box"> 1</div> <div class="box2 box"> 2</div> <div class="box3 box"> 3</div> <div class="box4 box"> 4</div> <div class="box5 box"> 5</div> <div class="box6 box"> 6</div> </div> </body> </html>