How to have multiple CSS transitions on an element?

In CSS, to apply multiple transforms to an element, use the transform property with each transform function separated by a space. The transform property enables the use of various transform functions such as rotate(), translate(), and scale() to apply transformations to the element simultaneously.

Example:

Suppose you have a button and you want it to rotate 45 degrees and scale to 1.5 times its original size when hovered. You can write the CSS as follows:

css
.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: rotate(45deg) scale(1.5);
}

Code Explanation:

1. .button class: This class is applied to your button. It includes a transition property that specifies how the transform property should smoothly transition over 0.3 seconds using the ease timing function.

2. :hover pseudo-class: When the mouse hovers over the button, the transform property is applied and executes the following transformations:

   • rotate(45deg): Rotates the button clockwise by 45 degrees.
   • scale(1.5): Scales the button to 1.5 times its original size.

These transform functions are separated by spaces in a single declaration and applied to the element in the order written. This is a simple and effective example of applying multiple CSS transforms.