CSS Transform and Transition

Front-end developers may now construct, move, reshape, rotate, scale, and translate items inside a coordinate without needing
JavaScript thanks to CSS3 transform and transition capabilities. With the inclusion of these attributes to CSS3, the web transitioned from a static, text-like appearance to a more dynamic, visual-effect-laden appearance.

A attribute that allows an element to modify its shape, size, and location is known as transform. The pace and length of a transformation are controlled by the transition property, making it smooth and linear.

Although transform and transition are independent properties, they are frequently used together to ensure that items on a web page move in a consistent and predictable manner. Transformation effects occur quickly and abruptly if there is no transition.

CSS transforms and transitions are frequently found in the advanced CSS section. They have nothing exceptional about them, despite the fact that they are not utilized as frequently as text attributes. They still use the normal CSS syntax and rule set. The key is in figuring out how to alter them on-screen within a certain point.

Transform
CSS transforms an element's state, location, and structure, particularly during events such as mouseover. Within the X and Y-axis, you may translate, skew, rotate, and skew elements. 2D (default transform) and 3D transforms are the two types of CSS transforms. Transformations in 3D can take place along the X, Y, and Z axes.
The transform syntax is straightforward:

transform: rotate(90deg);
The transform and transform-origin attributes in CSS are two. The latter is in charge of element transformation and positioning in the x, y, and z-axes. Left, right, center, top, bottom, and percent are all examples of transform-origin units.

transform: rotate(90deg);
transform-origin: 30% 20%;

The x-axis is represented by the first unit (30%), while the y-axis is represented by the second unit (20%). The transform and transform-origin properties can be combined on the same line in shorthand.

transform: rotate(40deg) 20% 30%;

**
Rotate()**
The transform property has a value called rotate(). According to the degree value, it spins an element clockwise or counterclockwise. The rotate value accepts a deg parameter. A positive deg will rotate an element clockwise, whereas a negative deg will rotate the element counter-clockwise.

Translate()
The X and Y-axis parameters are used to shift an element from its present location to another.

transform: translate (100px, 90px);

The first number, 100, moves the element to the right, while the second, 90, pushes it down from where it is now. If the same values were negative, such as -100 and -90, the element would be moved 100 pixels to the left and 90 pixels up from its existing location.
The axis can alternatively be given a single value and defined in the code declaration.
transform: translateY(20px);
transform: translateX(30px);
Skew()
The skew() function rotates an element along the X or Y axis.

transform: skew(20deg, 40deg);

transform: skewX(10deg);
transform: skewY(10deg);

You may alternatively use the following syntax to specify the axis:

transform: scale(3);

As a result, the element is three times its original size. Only two arguments are required for the scale value, the first for the component's width and the second for the component's height.

/* This will make the width twice the original size and the height 5 times the original size. */ transform: scale(2, 5)
The scaleX simply changes the width of an element, but the scaleY changes the height of the element.
Like this, you may define all of the transform settings on a single line.

3D Transform

You can move, rotate, skew, and scale an element on three axes: X, Y, and Z, using 3D transformations. The perspective feature is used in a 3D transform. This attribute allows an element to act as if it were in three dimensions when it is associated to it. The z-axis distance from the element's origin is specified by the prospective property's value, which is an integer. The depth illusion is created by the 3D effect.

Transition
The Transition property adds time durations, delays, and timing functions to components, letting them to transition from one state to another seamlessly, evenly, and gradually. When utilizing transition, two things must be specified: the property to which the transition is applied and the duration of the effect.

Transition can function independently of transform; in fact, transform is one of the properties of transition.

DELAY AND TRANSITION TIMING FUNCTIONS

Transition delay causes a delay in the occurrence of an effect, generally measured in seconds. The transition timing-function determines the effect's speed and motion. W3Schools claims that

"Values for the transition-timing-function property are as follows:
ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function.”

What are the benefits of using transforms and transitions?
CSS transformations and transitions may appear too complicated, and you may ask why you'd need them on a static site.

They enhance the aesthetic appeal of a location.
They give a website more life.
They improve the interactivity of a website.

What components require transitions and transforms?

Although not all items require visual effects, pictures and buttons are employed in the most common transform and transition scenarios. Visual effects breathe new life into these two parts, making a website more approachable.