JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="obj__box">
    
    <div class="rotate">Rotation</div>
    <div class="overlay"></div>
    
</div>

CSS

.obj__box {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px dashed #aaa;
}

.rotate {
    position: absolute;
    top: 20px; left: 50px;
    font-family: sans-serif;
     transform: rotate(339deg) scale(2) skew(1deg) translate(0px);
  -webkit-transform: rotate(328deg) scale(2) skew(1deg) translate(0px);
  -moz-transform: rotate(339deg) scale(2) skew(1deg) translate(0px);
  -o-transform: rotate(339deg) scale(2) skew(1deg) translate(0px);
  -ms-transform: rotate(339deg) scale(2) skew(1deg) translate(0px);
}


.overlay {
    position: absolute;
    width: 100%; height: 100%;
    top: 0px; left: 0px;
    background: #000;
    opacity: .5;
    transition: opacity 0.5s 0s;
}

.overlay:hover { opacity: 0; }