<!DOCTYPE html>
<style>
.container {
   width: 200px;
   height: 200px;
   margin: 75px 0 0 75px;
   border: none;
}
.cube {
   width: 100%;
   height: 100%;
   backface-visibility: visible;
   perspective-origin: 150% 150%;
   transform-style: preserve-3d;
   perspective: 500px;
}
.face {
   display: block;
   position: absolute;
   width: 100px;
   height: 100px;
   border: none;
   line-height: 100px;
   font-family: sans-serif;
   font-size: 60px;
   color: white;
   text-align: center;
}
.front {
   background: rgba(0, 0, 0, 0.3);
   translate: 0 0 50px;
}
.back {
   background: rgba(0, 255, 0, 1);
   color: black;
   translate: 0 0 -50px;
   rotate: 0 1 0 180deg;
}
.right {
   background: rgba(196, 0, 0, 0.7);
   translate: 50px 0 0;
   rotate: 0 1 0 90deg;
}
.left {
   background: rgba(0, 0, 196, 0.7);
   translate: -50px 0 0;
   rotate: 0 1 0 -90deg;
}
.top {
   background: rgba(196, 196, 0, 0.7);
   translate: 0 -50px 0;
   rotate: 1 0 0 90deg;
}
.bottom {
   background: rgba(196, 0, 196, 0.7);
   translate: 0 50px 0;
   rotate: 1 0 0 -90deg;
}
.scaleX {
    scale: 0.5 1.0 1.0;
}
.scaleY {
    scale: 1.0 0.5 1.0;
}
.scaleZ {
    scale: 1.0 1.0 0.5;
}
</style>

<div class="container">
    <div class="cube scaleY">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
    </div>
    <div class="cube scaleX scaleZ">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
    </div>
</div>