CSS Transform 3d

CSS Transform 3d

by learnscratchsg

HTML

<div class="container">
  <div class="parent"> <div class="child"></div>
  </div>
</div>

CSS

.container {
	width: 300px;
  height: 300px;
  outline: 1px solid red;
  -webkit-perspective: 500;
  -ms-perspective: 500;
  perspective: 500;
    -webkit-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.parent {
	width: 300px;
  height: 300px;
  padding: 50px;
  background: #575;
  -webkit-transform: rotateY(45deg);
      -ms-transform: rotateY(45deg);
          transform: rotateY(45deg);
  
   -webkit-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
           transform-style: preserve-3d;
   
}

.child {
	width: 200px;
  height: 200px;
  background: #557;
  
  -webkit-transform: rotateX(30deg) 
    translateZ(75px) translateY(40px);
  -ms-transform: rotateX(30deg) 
    translateZ(75px) translateY(40px);
  transform: rotateX(30deg) 
    translateZ(75px) translateY(40px); 
}