JSFiddle - React, Tailwind, and code Playground

by tylerbrownhenry

HTML

<div style="width:500px; height:500px; text-align:center; padding:10%;">

    <div class="w">
    
    <div class="rotate">
        
    <div class="square r">
    <div class="clip path"><div class="transform origin">
    <div class="imgclip"><div class="img"></div></div></div></div></div>
        
    <div class="square t">
    <div class="clip path"><div class="transform origin">
    <div class="imgclip"><div class="img"></div></div></div></div></div>
   
</div>     
    </div> 
</div>

CSS

.imgclip{
    width:0px;
    -webkit-transform-origin: 0% top;
    -webkit-transform: rotate(-45deg);
    position:absolute;
}

.w{
    width:200px;
    height:50px;  
    overflow:hidden; 
    position:absolute;            
}

.img{
   width:1600px; 
  height:590px;    
  position:absolute;
    margin-left:-800px;
    margin-top:100px;
    opacity:0.8;
    
}

.square{
     height:1000px;
     width:1000px;    
     position:absolute;    
}

.r{
 -webkit-transition: -webkit-transform 2s ease-in-out 1s;
         -webkit-transform: rotate(0deg);     
}

.t{
 -webkit-transition: -webkit-transform 2s ease-in-out 1s;
         -webkit-transform: rotate(-90deg);     
}

.rotate{
  height:200px;
  width:200px; 
  position:absolute;
  margin-top:-200px;  
}


.clip{
 height:50px;
 width:200px;    
 position:relative; 
background-color:black; 
bottom:-200px;    
}

.transform {
    opacity:0.4;
    margin-top:-100px;
    color: white;
    position: absolute;
    left: 50%;
    height: 600px;
    width: 600px;
    -webkit-transform-origin: 0% top;
    -webkit-transform: rotate(45deg);
    overflow:hidden;
}

/*a pseudo-element that represents the origin*/
.origigggn:before {
    left: 0%; /*change this to match the X origin*/
    top: 100%; /*change this to match the Y origin*/

    /*the rest styles the origin indicator*/    
    background: white;
    border-radius: 5px;
    content: "";
    position: absolute;
    margin: -5px 0 0 -5px;
    height: 10px;
    width: 10px;
}