fellow Devs,
I'm currently having trouble making my grinders (or whatever they're called) rotate properly in my svg. Basically I want them to rotate 360deg in place instead of going across the screen like so:
[codepen] (https://codepen.io/UserBrayann/pen/KKQNboQ)
Any solutions will be awesome and appreciated.
CSS
@keyframes cloud-color {
100% {
fill: #000;
}
}
@keyframes cloud-move {
from {
transform: translate(0, 20px);
}
to {
transform: translate(100px, 20px);
}
}
@keyframes rotating-grind {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.grind {
animation: 2s rotating-grind infinite linear;
transform-origin: top bottom;
}
.cloud {
animation: 2s cloud-move infinite alternate linear;
}
You can use
transform-box: fill-box;withtransform-origin: 50% 50%;