<h2>scaleX(1.3)</h2>

<div class="cube scalex1-3">

  <div class="side front"></div>

  <div class="side back"></div>

  <div class="side left"></div>

  <div class="side right"></div>

  <div class="side top"></div>

  <div class="side bottom"></div>

</div>

​

<h2>scaleY(0.7)</h2>

<div class="cube scaley0-7">

  <div class="side front"></div>

  <div class="side back"></div>

  <div class="side left"></div>

  <div class="side right"></div>

  <div class="side top"></div>

  <div class="side bottom"></div>

</div>

​

<h2>scaleZ(0.4)</h2>

<div class="cube scalez0-4">

  <div class="side front"></div>

  <div class="side back"></div>

  <div class="side left"></div>

  <div class="side right"></div>

  <div class="side top"></div>

  <div class="side bottom"></div>

</div>

html {

  width: 100vw;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0;

  font-family: sans-serif;

  text-align: center;

}

​

body {

  perspective: 700px;

}

​

.cube {

  width: 150px;

  height: 150px;

  margin: 50px 0;

  transform-style: preserve-3d;

}

​

.side {

  position: absolute;

  box-sizing: border-box;

  width: 150px;

  height: 150px;

​

  opacity: 0.7;

}

​

.front {

    transform: translateZ(75px);

    background-color: #ef5350;

}

​

.back {

    transform: translateZ(-75px);

    background-color: #ba68c8;

}

​

.left {

  transform: translateX(-75px) rotateY(90deg);

  background-color: #64b5f6;

}

​

.right {

  transform: translateX(75px) rotateY(90deg);

  background-color: #4dd0e1;

}

​

.top {

  transform: translateY(-75px) rotateX(90deg);

  background-color: #4db6ac;

}

​

.bottom {

  transform: translateY(75px) rotateX(90deg);

  background-color: #fff176;

}

​

.scalez0-4 {

  transform: scaleZ(0.4);

}

​

.scaley0-7 {

  transform: scaleY(0.7);

}

​

.scalex1-3 {

  transform: scaleX(1.3);

}