JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div id="viewport">
<div id="object">
    
    ta maman en string
    <div class="l"></div>
    <div class="t"></div>
    <div class="b"></div>
    <div class="r"></div>
    <div class="back"></div>    
</div>
</div>

SCSS

#viewport {
    position: absolute; top:0; left: 0; bottom: 0; right: 0;
    -webkit-perspective: 1000;
    background: rgba(255,0,0,.3);
    color: #fff;
    text-shadow: 0 0 5px #fff; 
}

#object {
    position: absolute;
    top: 50%; left: 50%;
    width: 400px; height: 400px;
    margin: -200px 0 0 -200px;
    background: rgba(0,255,0,.4);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(300px) rotateY(30deg);
    -webkit-transition: -webkit-transform 300ms linear;
    &:hover {
        -webkit-transform: translateZ(-1000px) rotateY(-330deg) rotateZ(-330deg) rotateX(-330deg);
         
    }
    
    div {
        position: absolute;
        background: rgba(0,0,255,.2);
        -webkit-transform-origin: 0 0;
    }

    .l {
        top:0; bottom: 0; left: 0;
        width: 550px;
        -webkit-transform: rotateY(90deg);        
    }

    .r {
        top:0; bottom: 0; right: 0;
        width: 550px;

        -webkit-transform: rotateY(-90deg);      
    }

    .t, .b {
        left: 0; right: 0;        
        height: 550px;
       
    }
    .t {
        top: 0;  
-webkit-transform: rotateX(-90deg);      
    }
    .b {
        bottom: 0;   
-webkit-transform: rotateX(90deg);     
    }

.r, .b {

        -webkit-transform-origin: 100% 100%; 
}

.back {
    top:0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);   
-webkit-transform: translateZ(-550px);  
}
    
}