3d scene w/ preserve-3d CSS

by Hugo Vale Pereira

HTML

<h1>The transform-style Property</h1>

<div id="div1">
  <div id="div2">HELLO
  	<div id="div3">YELLOW</div>
  </div>
</div>

CSS

#div1 {
  position: relative;
  height: 500px;
  width: 500px;
  margin: 100px;
  border: 1px solid black;
  padding-bottom: 500px;
  overflow: auto;
  box-sizing: border-box;
  perspective: 100px;
 
}

#div2 {
  padding: 100px;
 
  border: 1px solid black;
  
  transform: translateZ(-30px);
  
transform-style: preserve-3d;
  
}

#div3 {
  padding: 40px;
  
  border: 1px solid black;
  background-color: yellow;
  transform: translateZ(-100px);

}