cube animation

<style>
#scene {perspective:400px;
width:100px;
height:100px;

margin:100px auto;

}

#cube {
position:absolute;
transform-style:preserve-3d;
width:100px;
height:100px;


animation:anim1 2s ease infinite;
}

#div1 {width:200px;height:200px;background:red;}
.face {width:100%;height:100%;position:absolute;text-align:center;line-height:100px;}

.front {background:hsla(1,100%,50%,.7);transform:rotateY(0deg) translateZ(50px);}
.right {background:hsla(60,100%,50%,.7);transform:rotateY(90deg) translateZ(50px);}
.back {background:hsla(120,100%,50%,.7);transform:rotateY(180deg) translateZ(50px);}
.left {background:hsla(180,100%,50%,.7);transform:rotateY(270deg) translateZ(50px);}
.top {background:hsla(240,100%,50%,.7);transform:rotateX(90deg) translateZ(50px);}
.bottom {background:hsla(359,50%,100%,.7);transform:rotateY(-90deg) translateZ(50px);}

@keyframes anim1 {
0% {transform:scale(2) rotate3d(1,-1,0,0deg);}
100% {transform:scale(2) rotate3d(1,-1,0,360deg);}
}
</style>

<div id="scene">
<div id="cube">
<div class="face front">front</div>
<div class="face right">right</div>
<div class="face back">back</div>
<div class="face left">left</div>
<div class="face top">top</div>
<div class="face bottom">bottom</div>

</div></div>
<div id="div1" style="transform: matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 100, 200, 100, 1)">transformMatrix</div>

front

right

back

left

top

bottom

transformMatrix