JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="wr">
<div class="haus">    
    <div class="box">
        <div class="side1"></div>
        <div class="side2"></div>
        <div class="side3"></div>
        <div class="side4"></div>
        <div class="side5"></div>
        <div class="side6"></div>
    </div>-->
    <div class="roof">
        <div class="skat1"></div>
        <div class="skat2"></div>
        <div class="fasad1"></div>
        <div class="fasad2"></div>
    </div>
</div>
</div>    
    </body>

CSS

body{
    
}
@-webkit-keyframes 'spin'{
    0%{  -webkit-transform:rotateZ(0deg)}
100%{ -webkit-transform:rotateZ(360deg)}
}
.wr{
    position:absolute;
    -webkit-transform:rotateX(75deg);
     top:70%; left:20%;
    -webkit-transform-style:preserve-3d;
}
.haus {
    /*указываем параметры расположения контейнера, позиционирование - абсолютное*/
    position:absolute;
    width:150px; height:150px;
    /*тип трансформаций*/
    -webkit-transform-style:preserve-3d;
    /*установка наблюдателя*/
    -webkit-perspective:5000px;
    /**/
    -webkit-animation: 'spin' 10s linear infinite;
   /*-webkit-animation: 'spin' 10s ease infinite;*/
}
.box{
-webkit-transform-style:preserve-3d;
    
}
.box div{
    /*Универсальные свойства сторон*/
position:absolute;
height:150px;
width:150px;
border:1px solid black;    
-webkit-backface-visibility:hidden;    
}

.side1{
  background: url("http://habrastorage.org/storage2/132/48c/375/13248c375b61571eb9c5ac0fc93d50a3.jpg");
-webkit-transform:rotateX(-90deg) translate3D(0, -50%, 75px);
}
.side2{
  background: url("http://habrastorage.org/storage2/b7c/c61/775/b7cc6177513094344974117b4e801413.jpg");
 -webkit-transform:rotateX(-90deg) rotateY(-90deg) translate3D(0, -50%, 75px);
}
.side3{
  background: url("http://habrastorage.org/storage2/957/52d/a55/95752da553a8c98898803d2576b8dda5.jpg");
    -webkit-transform:rotateX(-90deg) rotateY(180deg) translate3D(0, -50%, 75px);
}
.side4{
  background: url("http://habrastorage.org/storage2/43e/ef3/4a8/43eef34a8da54c1aaaef0a798ac6b7b3.jpg");
     -webkit-transform:rotateX(-90deg) rotateY(90deg) translate3D(0, -50%, 75px);
}

.side5{
background:blue;
     -webkit-transform:translate3D(0, 0, 150px);
}
.side6{
background:green;
}

/*КРЫША*/
.roof div{
position:absolute;
    -webkit-backface-visibility:hidden; 
}
.roof{
-webkit-transform-style:preserve-3d;
position:absolute;
-webkit-transform:translate3D(-7px,-25px,150px) scale(1.1);
}

.skat1,.skat2{
/*visibility:hidden;...