Rotate a cube around it's diagonal - css

Question

I have this cube that I rotate it so I would look trough it's diagonal. How could I rotate this cube around this particular diagonal? I tried different rotations but nothing seems to fit me.
I am looking for CSS only solution/explenation.
.container {
width: 200px;
height: 200px;
position: absolute;
perspective: 10000px;
left: 50vw;
top: 50vh;
transform: translateX(-50%) translateY(-50%);
}
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.cube figure {
margin: 0;
width: 100%;
height: 100%;
display: block;
position: absolute;
border: 2px solid black;
box-sizing: border-box;
}
.cube .front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .back {
transform: rotateX(180deg) translateZ(100px);
}
.cube .right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(100px);
}
.cube {
transform: rotateY(35deg) rotateX(45deg);
}
.cube:hover {
transition: all 1s;
transform: rotateY(35deg) rotateX(45deg);
}
<section class="container">
<div class="cube">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</section>

Answer 1

Found it - this solved my problem (hover over cube).
Explanation: the transform stack is evaluated from right to left. So, if we want to rotate an element that is transformed around the z axis, we need to set this transform the first one.
If the original is
transform: translateX(-50%) translateY(-50%);
then
transform: rotateZ(value) translateX(-50%) translateY(-50%);
will rotate the element around the viewer z axis (the desired effect)
transform: translateX(-50%) translateY(-50%) rotateZ(value);
would rotate the element around its Z axis
.container {
width: 200px;
height: 200px;
position: absolute;
perspective: 10000px;
left: 50vw;
top: 50vh;
transform: translateX(-50%) translateY(-50%);
}
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.cube figure {
margin: 0;
width: 100%;
height: 100%;
display: block;
position: absolute;
border: 2px solid black;
box-sizing: border-box;
}
.cube .front { transform: rotateY( 0deg ) translateZ( 100px ); }
.cube .back { transform: rotateX( 180deg ) translateZ( 100px ); }
.cube .right { transform: rotateY( 90deg ) translateZ( 100px ); }
.cube .left { transform: rotateY( -90deg ) translateZ( 100px ); }
.cube .top { transform: rotateX( 90deg ) translateZ( 100px ); }
.cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }
.cube {
transform: rotateY(35deg) rotateX(45deg);
}
.cube:hover {
transition: all 1s;
transform:rotateZ(60deg) rotateY(35deg) rotateX(45deg);
}
<section class="container">
<div class="cube">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</section>