A cube rotating on its corner
I have a 3D cube, made of pure HTML-cum-CSS, that needs to rotate around one of its corners without rotating the corner around the screen. Unfortunately, this is not entirely true, it rather sways along a line (2D) or around a circle (3D). What am I doing wrong?
#cube {
position: relative;
margin: 100px auto;
height: 100px;
width: 100px;
animation: 4s rotateforever infinite linear;
transform-style: preserve-3d;
}
.face {
position: absolute;
height: 78px;
width: 78px;
padding: 10px;
border: black 2px solid;
}
.one {
transform: rotateX(-45deg) rotateY(45deg) translateZ(50px);
}
.two {
transform: rotateX(-45deg) rotateY(135deg) translateZ(50px);
}
.three {
transform: rotateX(-45deg) rotateY(225deg) translateZ(50px);
}
.four {
transform: rotateX(-45deg) rotateY(315deg) translateZ(50px);
}
.five {
transform: rotateX(45deg) rotateZ(-45deg) translateZ(50px);
}
.six {
transform: rotateX(45deg) rotateY(180deg) rotateZ(-45deg) translateZ(50px);
}
@keyframes rotateforever {
to {
transform: rotateY(360deg);
}
}
<body>
<div id="cube">
<div class="face one">one</div>
<div class="face two">two</div>
<div class="face three">three</div>
<div class="face four">four</div>
<div class="face five">five</div>
<div class="face six">six</div>
</div>
</body>
source to share
Found the answer:
According to Blender's post , the left and right angle between horizontal and cubic at its original position is not equal 45deg
(as I figured), but only 35.2644deg
.
So in my CSS I had to change the values of each occurrence transform: rotateX(...)
in 35.2644deg
where I had 45deg
and 54.7356deg
(90 - 35.2644) where I had -45deg
.
Same:
.one {
transform: rotateX(-54.7356deg) rotateY(45deg) translateZ(50px);
}
.two {
transform: rotateX(-54.7356deg) rotateY(135deg) translateZ(50px);
}
.three {
transform: rotateX(-54.7356deg) rotateY(225deg) translateZ(50px);
}
.four {
transform: rotateX(-54.7356deg) rotateY(315deg) translateZ(50px);
}
.five {
transform: rotateX(35.2644deg) rotateZ(-45deg) translateZ(50px);
}
.six {
transform: rotateX(35.2644deg) rotateY(180deg) rotateZ(-45deg) translateZ(50px);
}
I have updated the JSFiddle .
source to share