JSFiddle - React, Tailwind, and code Playground

by Mehmet Alp

HTML

<div class="buyukKutu">
    <div class="side1"><img width="250" height="250" src="http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg"></div>


</div>

CSS

body {
    background-color:#999;
}
.buyukKutu{
    position:absolute;
    width:100%; height:100%;
    -moz-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -moz-animation-name:buyukKutu;
    -o-animation-name:buyukKutu;
    -ms-animation-name:buyukKutu;
    -webkit-animation-name:buyukKutu;
    animation-name:buyukKutu;
    -moz-animation-duration:5s;
    -o-animation-duration:5s;
    -ms-animation-duration:5s;
    -webkit-animation-duration:5s;
    animation-duration:5s;
    -moz-animation-timing-function:linear;
    -o-animation-timing-function:linear;
    -ms-animation-timing-function:linear;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -moz-transform-origin:50% 50% 50px;
    -o-transform-origin:50% 50% 50px;
    -ms-transform-origin:50% 50% 50px;
    -webkit-transform-origin:50% 50% 50px;
    transform-origin:50% 50% 50px;
}
@-moz-keyframes buyukKutu {
    from { -moz-transform: rotateY(0) rotateX(0); }
    to { -moz-transform: rotateY(360deg) rotateX(360deg); }
}
@-o-keyframes buyukKutu {
    from { -o-transform: rotateY(0) rotateX(0); }
    to { -o-transform: rotateY(360deg) rotateX(360deg); }
}
@-ms-keyframes buyukKutu {
    from { -ms-transform: rotateY(0) rotateX(0); }
    to { -ms-transform: rotateY(360deg) rotateX(360deg); }
}
@-webkit-keyframes buyukKutu {
    from { -webkit-transform: rotateY(0) rotateX(0); }
    to { -webkit-transform: rotateY(360deg) rotateX(360deg);  }
}
@keyframes buyukKutu {
    from { transform: rotateY(0) rotateX(0); }
    to { transform: rotateY(360deg) rotateX(360deg);}
}

.side1 { position:fixed;
    -moz-transform:rotateY(90deg)...