JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<h1>Understanding 2D and 3D transformations</h1>

<div class="box-wrapper">
  
  <div class="box box-1">Box-1</div>
  <div class="box box-2">Box-2</div>
  
  <details>
    
The perspective-origin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.

When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

Note: This property must be used together with the perspective property, and only affects 3D transformed elements!
  </details>
</div>

CSS

.box-wrapper {
  border: 5px double black;
  height: 80vh;
  width: 80vw;
  margin: auto;
  overflow: hidden;
  perspective: 1000px; // for 3D transformations
}


.box {
  height: 15vh;
  width: 15vh;
  color: #fff;
  float: left;
  margin-right: 15px;
  padding: 5px;
  text-align: center;
}


.box-1 {
  background-color: hsl(100, 50%, 40%);
  transform: rotateX(30deg);
}


.box-2{
  background-color: hsl(200, 30%, 40%);
  transform: rotateY(30deg) rotateX(75deg);
}