JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<div class="content"></div>

CSS

.content {
    background:#222;
}
.content:after {
    content:"";
    clear:both;
    display:block;
}
#div1 {
    width:50px;
    height:50px;
    position: relative;
    float:left;
    -webkit-perspective:250px;
    /* Chrome, Safari, Opera  */
    perspective:250px;
}
#div1:hover #div2 {
    -moz-transition:all 0.2s ease-out;
    -webkit-transition:all 0.2s ease-out;
    transition:all 0.2s ease-out;
    -webkit-transform: rotateY(360deg);
    /* Chrome, Safari, Opera  */
    transform: rotateY(360deg);
    background:#555;
}
#div2 {
    -moz-transition:all 2s ease-out;
    -webkit-transition:all 2s ease-out;
    transition:all 2s ease-out;
    position:absolute;
    width:100%;
    height:100%;
    background-color: #333;
    -webkit-transform: rotateY(0deg);
    /* Chrome, Safari, Opera  */
    transform: rotateY(0deg);
    margin:5px;
}

JavaScript

var template = '<div id="div1">' +
    '<div id="div2"></div>' +
    '</div>';
var count = 1000;
for (var i = 0; i < count; i++)
$(template).appendTo('.content');