Can't spin 3d cube

Question

I'm coding a cube but can not get it to rotate properly, could anybody help me out? I have tried everything. Link to my code is below:

Codepen Link

 @keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } body.cube { overflow: visible; perspective: 800px; perspective-origin: 100px 100px; margin-top: 50px; margin-left: 200px; position: relative; animation: spin 10s linear infinite; transform-origin: 150px 150px; transform-style: preserve-3d; transform-box: fill-box; } body.cube h1 { text-align: center; transform: translateY(350%); } body.cube.frontside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background-color: green; transform: translateZ(150px); } body.cube.backside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background-color: black; transform: translateZ(-150px); } body.cube.leftside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background: purple; transform: translateX(-150px) rotateY(90deg); } body.cube.rightside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background-color: midnightblue; transform: translateX(150px) rotateY(90deg); } body.cube.topside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background-color: yellow; transform: translateY(-150px) rotateX(90deg); } body.cube.bottomside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background: red; transform: translateY(150px) rotateX(90deg); }

 <div class="cube"> <div class="frontside"><h1>Hello1</h1></div> <div class="backside"><h1>Hello2</h1></div> <div class="leftside"><h1>Hello3</h1></div> <div class="rightside"><h1>Hello4</h1></div> <div class="topside"><h1>Hello5</h1></div> <div class="bottomside"><h1>Hello6</h1></div> </div>

Answer 1

If this is not what you want, modify the question

 @keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } body.cube { overflow: visible; perspective-origin: 100px 100px; margin-top: 50px; margin-left: 200px; position: relative; transform-origin: 150px 150px; transform-style: preserve-3d; transform-box: fill-box; height: 200px; width: 200px; -webkit-animation: spin 15s infinite linear; } body.cube h1 { text-align: center; transform: translateY(350%); } body.cube.frontside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background-color: green; transform: translateZ(150px); } body.cube.backside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background-color: black; transform: translateZ(-150px); } body.cube.leftside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background: purple; transform: translateX(-150px) rotateY(90deg); } body.cube.rightside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background-color: midnightblue; transform: translateX(150px) rotateY(90deg); } body.cube.topside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background-color: yellow; transform: translateY(-150px) rotateX(90deg); } body.cube.bottomside { width: 300px; height: 300px; position: absolute; margin: 0; opacity: 0.5; background: red; transform: translateY(150px) rotateX(90deg); }

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" href="1.css"> <script type="text/javascript"></script> </head> <body> <div class="cube"> <div class="frontside"><h1>Hello1</h1></div> <div class="backside"><h1>Hello2</h1></div> <div class="leftside"><h1>Hello3</h1></div> <div class="rightside"><h1>Hello4</h1></div> <div class="topside"><h1>Hello5</h1></div> <div class="bottomside"><h1>Hello6</h1></div> </div> </body> </html>

Can't spin 3d cube

Question

1 answers

solution1
0 2019-09-27 15:28:35

Can't spin 3d cube

Question

1 answers

solution1 0 2019-09-27 15:28:35

solution1
0 2019-09-27 15:28:35