transform-rotate

by Mo Yummy

HTML

<html>
  <body>
    <div id=scene1>
      <div id=div1></div>
    </div>
    <div id=scene2>
      <div id=div2></div>
    </div>
    <div id=scene3>
      <div id=div3></div>
    </div>
  </body>
</html>

SCSS

body {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  #scene1, #scene2, #scene3 {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 10em;
    width: 10em;
    perspective: 20em;
    perspective-origin: 50% -50%;
    #div1 {
      background: red;
      height: 4em;
      width: 4em;
      position: absolute;
      transform: rotate3d(0, 0, 1, 45deg);
    }
    #div2 {
      background: green;
      height: 4em;
      width: 4em;
      position: absolute;
      transform: rotate3d(1, 0, 0, 90deg);
    }
    #div3 {
      background: blue;
      height: 4em;
      width: 4em;
      position: absolute;
      transform: rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg);
    }
  }
}