JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      #anim1 {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
      }
      
      #anim1 iframe {
        -webkit-transition: -webkit-transform 1s ease-in-out;
        -webkit-transform: rotate3d(0, 100, 1, -30deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0, 100, 1, -30deg);
      }
      
      #anim1 iframe:hover {
        -webkit-transform: rotate3d(0, 100, 1, 0deg);
        transform: rotate3d(0, 100, 1, 0deg);
      }
    </style>
  </head>
  <body>
    <div id="anim1">
      <iframe src="http://www.html5rocks.com/"></iframe>
    </div>
  </body>
</html>