JSFiddle - React, Tailwind, and code Playground

by provegard

HTML

<div id="rotate-y" class="container">
    <div class="panel">rotateY( 45deg )</div>
  </div>

CSS

.container {
      width: 200px;
      height: 200px;
      border: 1px solid #CCC;
      margin: 0 auto 60px;
      position: relative;
      -webkit-perspective: 600px;
         -moz-perspective: 600px;
           -o-perspective: 600px;
              perspective: 600px;
    }

.panel {
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0.7;
      color: white;
      background: red;
    }

    #rotate-y .panel {
      -webkit-transform: rotateY( 45deg );
         -moz-transform: rotateY( 45deg );
           -o-transform: rotateY( 45deg );
              transform: rotateY( 45deg );
    }