JSFiddle - React, Tailwind, and code Playground

by nickaknudson

HTML

<h1>
<div>
    Stuff in the div
    Stuff in the div
    Stuff in the div
    Stuff in the div
    Stuff in the div
    Stuff in the div
    Stuff in the div
    Stuff in the div
    
</div>
<h1>

CSS

h1 { -webkit-transform-style: preserve-3d;
     -webkit-perspective: 800px;
     -webkit-perspective-origin: 250px 310px;

}


div {
    border: solid 5px #fff;
    border-color: black;
    position: absolute;
        left: 100px;
        top: 100px;
    width: 300px;
    height: 200px;
    -webkit-transition: all ease 1s;

}

div:hover {
  -webkit-transform:rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 100%;
}