Converting 4 sided cube into 3 side - html

Question

I'm trying to create a "3 photo cube" with cube effect rotating.
Found a very helpful codepen which created the cube with 4 sides and did the rotating and stopping by side which was exactly what i wanted.
Issue here is that i need the cube to show just 3 sides not 4 and when i remove one of them, it still rotates on that side.
I thought i should just "match" top side bottom side so the back side doesn't show but it seems i am having a little knowledge at understanding how the positioning works.
see the below snippet.
.scene {
width: 416px;
height: 500px;
margin: 75px auto 0;
perspective: 1200px;
}
.cube {
position: relative;
width: 416px;
height: 500px;
transform-style: preserve-3d;
transform: translateZ(0px) rotateX(150deg);
animation: example 15s linear infinite;
}
.side {
position: absolute;
width: 416px;
height: 500px;
box-sizing: border-box;
background-color: #999;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 120px 0;
font: 50px/1 'Trebuchet MS', sans-serif;
color: #fff;
text-transform: uppercase;
text-align: center;
}
.side::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
}
.side span {
position: relative;
}
.guides {
position: absolute;
top: 0;
left: 50px;
width: 200px;
height: 100%;
border-style: dotted;
border-width: 0 1px;
color: rgba(255, 255, 255, 0.6);
}
.guides::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
border-left: 1px dotted;
}
.back {
transform: translateZ(-250px) rotateX(180deg);
}
.bottom {
transform: translateY(250px) rotateX(270deg);
}
.front {
transform: translateZ(250px);
}
.top {
background-image: url(https://askd.github.io/codepen/top.jpg);
}
.back {
background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/rimodelimi-i-hundes-galeri.jpg);
}
.bottom {
background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/foto-galeri-zmadhimi-i-gjoksit.jpg);
}
.front {
background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/barku-home.jpg);
}
#keyframes example {
0% { transform: translateZ(-150px) rotateX(0deg); }
15% { transform: translateZ(-150px) rotateX(90deg); }
25% { transform: translateZ(-150px) rotateX(90deg); }
40% { transform: translateZ(-150px) rotateX(180deg); }
50% { transform: translateZ(-150px) rotateX(180deg); }
65% { transform: translateZ(-150px) rotateX(270deg); }
75% { transform: translateZ(-150px) rotateX(270deg); }
90% { transform: translateZ(-150px) rotateX(360deg); }
100% { transform: translateZ(-150px) rotateX(360deg); }
}
<div class="scene">
<div class="cube">
<div class="side back">
<span>BACK</span>
</div>
<div class="side bottom">
<span>BOTTOM</span>
</div>
<div class="side front">
<span>FRONT</span>
</div>
</div>
</div>
Anybody can give me some directions on how to approach this issue?
Any help is appreciated

Answer 1

I made a working exemple of a rotating prism (Y axis) here.
And the same on the X axis here.
There are 2 things to figure out, the distance to translate each face and the rotation angle.
The distance bring back to trigonometry which made my brain hurt a little, but to make it simple, in this case you get it by doing : translationDistance = (faceWidth/2) / tan(30).See this article by David DeSandro for more explanations.
In my code :
--cotetriangle: 200px;
/* r = 100 / tan(30) = 57.7 */
--translationDistance: 58px;
The angle of rotation is easy, 3 faces, 360deg -> 120deg for each rotation.
Which gives you :
.triangle-face-front {
background: rgb(71, 71, 136);
transform: translate3d(0, 0, var(--translationDistance));
}
.triangle-face-left {
background: rgb(90, 233, 77);
transform: rotateY(-120deg) translate3d(0, 0, var(--translationDistance));
}
.triangle-face-right {
background: black;
transform: rotateY(120deg) translate3d(0, 0, var(--translationDistance));
}
I did a little 'pausing' animation as you suggested :
#keyframes rotateTriangle {
0% {
transform: rotateY(0deg);
}
24%,34%{
transform: rotateY(120deg);
}
58%,67%{
transform: rotateY(240deg);
}
91%, 100% {
transform: rotateY(360deg);
}
To switch between a lateral rotation (code above) and a frontal rotation, you just need to replace rotateY by rotateX
To understand better CSS 3D, I encourage you to read those 2 articles :
Intro to CSS 3D transforms by David DeSandro
Creating a 3D Cube Image Gallery by Kushagra Gour