Menu
I'm not sure if this is the right way, but I want to spin an element,
and I know transform: rotate(90deg) & transition-property:all will work, but I don't want to transition all of the transformations
.
What transition-property should I use, and is there a better way to create a spinning animation?
680
transform-origin By default, the origin is in the center of the element. For example, if you are using the transform: rotate property but want it to rotate not from the center, but from the top left corner, you'd use the value 0% 0% or left top . For the bottom right corner, you would use 0% 100% or right bottom , etc.
The transform property in CSS is used to change the coordinate space of the visual formatting model. This is used to add effects like skew, rotate, translate, etc on elements.
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.
To target transforms on transition-property you should use:
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
