JSFiddle - React, Tailwind, and code Playground
by AndreaLigios
HTML
<div class="tile10"></div>
CSS
@keyframes"rotate" {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 0 0, 0 0, 50% 50%;
-moz-transform-origin: 0 0, 0 0, 50% 50%;
-o-transform-origin: 0 0, 0 0, 50% 50%;
-ms-transform-origin: 0 0, 0 0, 50% 50%;
transform-origin: 0 0, 0 0, 50% 50%;
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: 0 0, 0 0, 50% 50%;
-moz-transform-origin: 0 0, 0 0, 50% 50%;
-o-transform-origin: 0 0, 0 0, 50% 50%;
-ms-transform-origin: 0 0, 0 0, 50% 50%;
transform-origin: 0 0, 0 0, 50% 50%;
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transform-origin: 0 0, 0 0, 50% 50%;
transform-origin: 0 0, 0 0, 50% 50%;
}
to {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-moz-transform-origin: 0 0, 0 0, 50% 50%;
transform-origin: 0 0, 0 0, 50% 50%;
}
}
@-webkit-keyframes "rotate" {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 0 0, 0 0, 50% 50%;
transform-origin: 0 0, 0 0, 50% 50%;
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: 0 0, 0 0, 50% 50%;
transform-origin: 0 0, 0 0, 50% 50%;
}
}
@-ms-keyframes"rotate" {
from {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-ms-transform-origin: 0 0, 0 0, 50% 50%;
transform-origin: 0 0, 0 0, 50% 50%;
}
to {
-ms-transform: rotate(360deg);
...