CODEWITHSUNDEEP
htmlcss
Lars Mohammed
Lars Mohammed

Reputation: 117

Can't spin 3d cube

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>

Upvotes: 2

Views: 108

Answers (1)

Wassim Al Ahmad
Wassim Al Ahmad

Reputation: 1094

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>

Upvotes: 2

Related Questions