JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div></div>

CSS

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotateY(0deg);
    }
50%{
        -webkit-transform: rotateY(180deg);
    }
    to{
        -webkit-transform: rotateY(360deg);
    }
}
@-ms-keyframes rotating {
     from{
         -ms-transform: rotateY(0deg);
     }
 50%{
         -ms-transform: rotateY(180deg);
     }
     to{
         -ms-transform: rotateY(360deg);
     }
 }
@-o-keyframes rotating {
     from{
         -o-transform: rotateY(0deg);
     }
 50%{
         -o-transform: rotateY(180deg);
     }
     to{
         -o-transform: rotateY(360deg);
     }
 }
@-moz-keyframes rotating {
    from{
        -moz-transform: rotateY(0deg);
    }
50%{
        -moz-transform: rotateY(180deg);
    }
    to{
        -moz-transform: rotateY(360deg);
    }
}


div{
 width:26px;
height:20px;    
 border:2px solid black;
position:relative;  
margin:100px; 
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite; 
-ms-animation: rotating 2s linear infinite; 
-o-animation: rotating 2s linear infinite; 
animation: rotating 2s linear infinite;     
}
div:hover{
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;     
}
div:before{
content:'';
position:absolute;
top:4px;
left:-2px;
width:30px;
height:12px;
background:white;  
}

div:after{
content:'+';
position:absolute;
line-height:22px;
top:-2px;
left:6px;
width:14px;
height:24px;
background:white;   
}