Why are 3D cube faces distorted? - html

Question

I'm designing a rotating cube logo for my portfolio site. After trying all night, for some reason my 3D cube logo is no longer a cube. Two problems:
The shape of the cube is distorted. The .front div is larger than all the other divs for the cube. I can't see why this is happening.
When .container div's animation is commented out, you'll notice the viewer position is head on. I need the view position to be more 'isometric', like the viewer is looking at the edge of the cube from above. I've tried to rotate the Z- and Y-axis of the .container div to achieve this but no luck so far. Un-comment the background-color: pink; on the .container div to see this.
I have a feeling the above problems are to do with the perspective property. I'm not sure how to calculate the correct amount of perspective here, and this could be my problem.
Here's my CodePen link.
HTML:
<div class="container">
<div class="cube">
<div class="front"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="back"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="left"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="right"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="top"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="bottom"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
</div>
</div>
CSS:
html {
background: #666;
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.container {
position: relative;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
/* background-color: pink; */
transform-style: preserve-3d;
perspective: 1000px;
animation: rotate 2000ms linear infinite;
}
.cube {
/* background-color: blue; */
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border: 5px solid #ccc;
box-sizing: border-box;
background-size: cover;
}
.cube img {
width: 100%;
opacity: 1;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
#keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

Answer 1

There are an issue because you rotate the container and its perspective as well.
you want a perspective on the cube, you have to set the perspective property on body element (or any kind of container of your animation that is not animated itself) and avoid to set it on the animated element. Actually, moving the element that is set by a perspective value will move this 3D element inside a 2D view – its own parent element. That causes the weird cube rendering on your exemple.
Also, if you want to control the perpective origin, you can use perspective-origin that lets you determine the position at which the viewer is looking. Associated with perspective property, you will be able to control the whole rendered scene.
So, the result will change with following code:
html { background: #666; }
body {
margin: 0;
padding: 0;
height: 100vh;
perspective: 900px;
perspective-origin: bottom;
}
.container {
position: relative;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
transform-style: preserve-3d;
animation: rotate 2000ms linear infinite;
}
.cube {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border: 5px solid #ccc;
box-sizing: border-box;
background-size: cover;
}
.cube img {
width: 100%;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
#keyframes rotate {
to { transform: rotateY(360deg); }
}
<body>
<div class="container">
<div class="cube">
<div class="front"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="back"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="left"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="right"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="top"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="bottom"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
</div>
</div>
</body>