JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tile10"></div>
CSS
@keyframes"rotate" {
from {
transform: rotate(0deg);
transform-origin: 0 0, 0 0, 50% 50%;
}
to {
transform: rotate(360deg);
transform-origin: 0 0, 0 0, 50% 50%;
}
}
.tile10 {
position: absolute;
width: 80px;
height: 80px;
background: url(http://www.mauricederegt.nl/tile1.svg), url(http://www.mauricederegt.nl/gaas.png);
background-repeat: no-repeat;
background-position: 0 0, 0 0;
}
.tile10:after {
content:'';
width: 80px;
height: 80px;
position: absolute;
background: url(http://www.mauricederegt.nl/fan.svg);
background-repeat: no-repeat;
background-position: 6px 5px;
animation: rotate 2s linear infinite;
z-index: -1;
}