transform ; property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.
the value specifies the transform type followed by a specific amount inside parentheses, transform includes multiple vendor prefixes to gain the best support across all browsers.
2D Transforms
-
2D rotate, The rotate value provides the ability to rotate an element from 0 to 360 degrees. Using a positive value will rotate an element clockwise, and using a negative value will rotate the element counterclockwise.
-
2D Scale
scale value it allows you to change the appeared size of an element. The default scale value is 1, therefore any value between .99
-
2D Translate, value works a bit like that of relative positioning, pushing and pulling an element in different directions without interrupting the normal flow of the document.
Transitions & Animations
Transitions;
The easiest way for determining styles for different states is by using the( :hover, :focus, :active, and :target pseudo-classes).
all of the properties within an element’s different states will be altered upon change,It is important to note, not all properties may be transitioned, only properties that have an identifiable halfway point. Colors, font sizes, and the alike may be transitioned from one value to another.
Transition Delay;
On top of declaring the transition property, duration, and timing function, you can also set a delay with the transition-delay property. The delay sets a time value, seconds or milliseconds.
effects that will add life to your UI such as ;
-
Fade in; It’s a great way to emphasize functionality or draw attention to a call to action.
-
Change color ; Animating a change of color used to be unbelievably complex
-
Grow & Shrink; To grow an element, you used to have to use its width and height, or its padding.
-
Rotate elements CSS transforms have a number of different uses, and one of the best is transforming the rotation of an element.
-
Square to circle A really popular effect at the moment is transitioning a square element into a round one,