How to Apply CSS Multiple Transform Properties

One of the most robust features of CSS is its capability to apply multiple transforms to an element. This allows developers to create visually stunning effects and animations by seamlessly combining various transformations.

Applying CSS multiple transform properties enables developers to dynamically adjust the position, size, and orientation of elements, enhancing visual design without disrupting the overall layout of the webpage. This capability allows for precise and complex transformations, providing a powerful toolset to create engaging and functional user interfaces.

What Is CSS Transform Property?

The CSS transform property simplifies applying transformations, making it easier to use as transformations seemed to be a workload to fix in the past.

As the name implies, the CSS transform property is used to apply transformations to elements in a 2D or 3D space. It allows you to do four fundamental things: translate, rotate, skew, and scale elements. CSS transform property offers alterations of position, size, and orientation, which enhances the designs of elements without compromising the structural integrity of the webpage.

Here is a valid transform declaration:

For example, if you translate an element using transform: translate(50px, 50px), it will visually move on the screen without changing its position in the HTML document. Other elements on the page are not affected by this transformation in layout or positioning.

To learn more about CSS transform and its properties with detailed examples, refer to this blog on CSS transforms and transitions properties.

Here is a real-world example of the transform property displayed when you hover on Netflix Home Page.

Applying multiple transform properties in CSS enhances web design’s functionality and aesthetics, enabling developers to create complex animations, improve performance, and provide a better user experience.

We have been able to look at the best ways to implement transform properties, but there are a few key benefits to using multiple transform properties:

• Complex Animations: Combining the CSS multiple transform properties like translate, rotate, skew, and scale makes the developer a creator. With these functions, you can step beyond normal animations to create more complex ones.
• Smooth Performance: Not all animations are handled by the GPU (Graphics Processing Unit), which births the most laggy animations on a website. Instead, GPU handles transforms and is compatible with mostly all major browsers, which means they can be executed more smoothly and efficiently than other types of animations in major browsers.
• Enhanced Visual Design: CSS multiple transform properties add depth, perspective, and emphasis to design elements, enhancing their interactivity and visual appeal. For example, rotating and scaling can make interactive elements more engaging, while translating and rotating can create dynamic motion effects.
• Improved User Experience: Well-designed animations provide visual feedback, guide user attention, and make interfaces feel responsive and intuitive. Transitions can indicate changes in interface states, such as menu expansions or content loading, improving overall user experience.
• Space Efficiency: Transformations alter an element’s appearance without affecting document layout, allowing elements to overlap or change size seamlessly. This efficient use of space ensures designs remain stable and visually appealing without causing layout shifts.
• Fallback and Compatibility: Using CSS multiple transform properties can provide graceful fallbacks for older browsers that may not support advanced CSS features like 3D transforms. For instance, relying on 2D transforms ensures a consistent user experience across different browser environments.

Syntax of CSS Multiple Transform Properties

When applying multiple transforms, it is important to consider the variety of functions it uses to alter the appearance of an element; this could be in a two-dimensional (2D) or three-dimensional (3D) space.

Here’s a list of the most commonly used transform functions. These functions are widely used, and you will most obviously be using them alongside the transform property.

2D Transform Functions

2D transform functions are used to modify the appearance of an element in a two-dimensional plane. These functions allow you to change an element’s position, size, and rotation without altering the document’s layout.

The modifications made using 2D transform functions are purely visual, meaning the space the element originally occupied in the document flow remains unchanged.

Here’s a breakdown of the core concepts behind each of the 2D transform functions:

• translate(x, y): This moves an element in horizontal and vertical directions. The x value shifts the element left or right, while the y value moves it up or down. This function doesn’t change the layout space the element occupies.
transform: translate(50px, 100px);

1	transform: translate(50px, 100px);

• translateX(x): Moves the element by x horizontally.
transform: translateX(50px);

1	transform: translateX(50px);

• translateY(y): Moves the element by y vertically.
transform: translateY(100px);

1	transform: translateY(100px);

• scale(sx, sy): Scales the element by sx times in the horizontal direction and sy times in the vertical direction. If sy is not defined, it’s assumed to be equal to sx.
transform: scale(2, 3);

1	transform: scale(2, 3);

• scaleX(sx): Scales the element by sx times in the horizontal direction
transform: scaleX(2);

1	transform: scaleX(2);

• scaleY(sy): Scales the element by sy times in the vertical direction.
transform: scaleY(3);

1	transform: scaleY(3);

• rotate(angle):Rotates the element clockwise by the specified angle (in degrees or radians).
transform: rotate(45deg);

1	transform: rotate(45deg);

• skewX(angle): Skews the element along the X-axis by the given angle. skew() transformation distorts elements along the X, Y, or axes. Unlike rotation, which pivots an element around a point, skewing slants an element, altering its shape without changing its area. The skew effect can create a sense of motion or depth, add visual interest, and break up straight lines in a design.
transform: skewX(20deg);

1	transform: skewX(20deg);

• skewY(angle):Skews the element along the Y-axis by the given angle.
transform: skewY(20deg);

1	transform: skewY(20deg);

3D Transform Functions

3D transforms manipulate elements in three-dimensional space, allowing for more complex and dynamic web designs. Unlike 2D transforms that work on the x and y axes, 3D transforms add the z-axis into the mix, enabling depth and perspective manipulation.

These transforms require a perspective from the viewer to be fully appreciated, which can be defined using the CSS perspective property on the parent container or the perspective function as part of the transform list.

Here’s a breakdown of the core concepts behind each of the 3D transform functions:

• translateZ(z): Moves the element along the Z-axis in 3D space.
transform: translateZ(50px);

1	transform: translateZ(50px);

• translate3d(x, y, z): Moves the element in 3D space.
transform: translateZ(50px);

1	transform: translateZ(50px);

• translateZ(z): Moves the element along the Z-axis in 3D space.
transform: translate3d(100px, 100px, 50px);

1	transform: translate3d(100px, 100px, 50px);

• scaleZ(sz): Scales the element along the Z-axis in 3D space.
transform: scaleZ(2);

1	transform: scaleZ(2);

• scale3d(sx, sy, sz): Scales the element in 3D space.
transform: scale3d(2, 2, 3);

1	transform: scale3d(2, 2, 3);

• rotateX(angle): Rotates the element around its X-axis.
transform: rotateX(45deg);

1	transform: rotateX(45deg);

• rotateY(angle): Rotates the element around its Y-axis.
transform: rotateY(45deg);

1	transform: rotateY(45deg);

• rotateZ(angle): Rotates the element around its Z-axis, equivalent to using the rotate() function.
• rotate3d(x, y, z, angle): Rotates the element in 3D space around a vector defined by x, y, and z axes.
transform: rotate3d(1, 1, 0, 45deg);

1	transform: rotate3d(1, 1, 0, 45deg);

• perspective(length): Applies a perspective view for a 3D-transformed element.
perspective(500px) rotateY(45deg);

1	perspective(500px) rotateY(45deg);

Below is a use case for applying multiple transforms in CSS to create a 3D effect.

See the Pen
Applying Multiple Transform in CSS(Creating 3D Effects) by Marvel Ken (@Marvel-Ken)
on CodePen.

Applying Multiple Transformation: Key Principles

Applying the CSS multiple transform properties refers to applying more than one transformation function to an element using the transform property. This approach combines transformations like translate, rotate, scale, skew, and matrix, enabling us to create more lively and interactive elements.

Think of it as a waterfall that tilts, gets thinner or wider, spins around, and moves simultaneously. To apply multiple transforms in CSS, you can use multiple values of the CSS transform property separated by spaces. The transformations are applied in the order from right to left. This means the last specified transform is applied first, followed by the transforms to its left, affecting the final visual result. Changing the order of these values can alter the outcome of the transformation.

Here’s an example:

In this example:

• The element is moved 50px to the right and 50px down.
• Then, it is rotated by 45 degrees.
• Finally, it is scaled to 1.5 times its original size.

You can create complex visual effects and interactions using multiple transforms with a single CSS property.

While applying CSS multiple transforms, the transformation functions are executed in the order specified within the property value; this means the application of the properties will act from the right to the left.

The above syntax will most likely translate the element 50 pixels to the right first and 50 pixels downward. Secondly, it will rotate it by 45 degrees, then scale it to 1.5 times its original size, and lastly, skew it by 10 degrees on the X-axis and 20 degrees on the Y-axis.

Let’s understand the key principles that would help you implement CSS multiple transforms in a better way:

• Combining Transformations: Multiple transformation functions can be combined within a single transform property by separating them with spaces.

For example: transform: rotate(30deg) scale(1.5);.

• Order of Operations: The order in which transformation functions are listed is crucial because the transformations are applied sequentially. This means that the output of one transformation becomes the input to the next.

Let’s combine CSS multiple transform functions to understand this concept: Translating and rotating an element.

In this scenario, we’ll see how applying a translation before a rotation differs from applying a rotation before a translation. This difference is important in achieving precise positioning in web design.

.element-translate-rotate { transform: translateX(100px) rotate(30deg); transition: transform 2s ease-in-out; }

1 2 3 4

.element-translate-rotate {   transform: translateX(100px) rotate(30deg);   transition: transform 2s ease-in-out; }

In this example, the element moves 100 pixels from its original position to the right and then rotates 30 degrees around its new position. The translation shifts the element’s position on the screen, and the subsequent rotation is applied relative to this new position.

This means the element will end up rotated, but its pivot point for the rotation is where the translation has moved it, not its original location in the document.

.element-rotate-translate { transform: rotate(30deg) translateX(100px); transition: transform 2s ease-in-out; }

1 2 3 4

.element-rotate-translate {   transform: rotate(30deg) translateX(100px);   transition: transform 2s ease-in-out; }

Slightly different from the first, here, the element is first rotated 30 degrees around its original center, then it is translated 100 pixels to the right. However, because the rotation is applied first, the direction of the translation is also affected by this rotation.

This means the element doesn’t move strictly horizontally to the right but moves along the axis defined by its rotation. The translation path is angled, following the rotation’s direction.

• Matrix Operations: Behind the scenes, each transformation function (like translate, rotate, scale) is represented by a matrix. When multiple transformations are applied, their corresponding matrices are multiplied in the specified order to obtain a final transformation matrix. This matrix mathematically combines all the transformations into one.
• Transform Origin: The CSS transform-origin property affects how transformations are applied by changing the point around which transformations are performed. This can significantly affect the outcome of a sequence of transformations, especially rotations and scaling.
• 3D Transforms: When applying 3D transformations (like rotateX, rotateY, or translateZ), the order of transformations can dramatically affect the visual result due to the perspective and three-dimensional space.

Implementing CSS Multiple Transform Properties

Here, we will learn how to apply the CSS multiple transform properties using two or more transform properties: translate, rotate, skew, and scale.

Before we start applying multiple transforms in CSS, we will take an example where we will combine, translate, and rotate properties to understand how to use each property one after the other.

Translate and Rotate Functions

Before we start with real-time implementation, let’s take an example to understand how to use CSS multiple transform properties together on an element.

• Translate, then Rotate

In this example, we’ll see how applying a translation before a rotation differs from applying a rotation before a translation. This difference is important in achieving precise positioning and orientation of elements in web design.

CSS .element-translate-rotate { transform: translateX(100px) rotate(30deg); transition: transform 2s ease-in-out; }

1 2 3 4 5

CSS .element-translate-rotate {   transform: translateX(100px) rotate(30deg);   transition: transform 2s ease-in-out; }

In this example, the element moves 100 pixels from its original position to the right and then rotates 30 degrees around its new position.

The translation shifts the element’s position on the screen, and the subsequent rotation is applied relative to this new position.

This means the element will end up rotated, but its pivot point for the rotation is where the translation has moved it, not its original location in the document.

• Rotate, then Translate
.element-rotate-translate { transform: rotate(30deg) translateX(100px); transition: transform 2s ease-in-out; }

1 2 3 4

.element-rotate-translate {   transform: rotate(30deg) translateX(100px);   transition: transform 2s ease-in-out; }

In the above code example, the element is first rotated 30 degrees around its original center. Following the rotation, it is then translated 100 pixels to the right.

Due to the initial rotation, the direction of the translation is influenced. As a result, the element doesn’t move strictly horizontally to the right; rather, its movement follows the axis defined by its rotation. The translation path is angled, aligning with the direction set by the rotation.

Now, let’s learn how the translate and rotate functions work together in a real-time implementation.

For demonstration, we will create a card called “Try LambdaTest Now!” and apply the CSS multiple transforms using the translate and rotate properties.

The code below creates it; the effect is shown in the CodePen below.

The transform property applies two transformation functions:

• translateY(-50%): This moves the pseudo-element by 50% of its height. The purpose of this transformation is to vertically center the pseudo-element relative to its parent container, assuming the top of the pseudo-element is initially placed at the container’s vertical center (top: 50%).
• rotate(20deg): This rotates the pseudo-element by 20 degrees clockwise around its origin point (which, by default, is the element’s center). The rotation gives the element a skewed appearance, a common technique for creating visually interesting, dynamic layouts.

See the Pen
Applying Multiple Transform in CSS Demo 2 by Marvel Ken (@Marvel-Ken)
on CodePen.

Result:

Skew Function

To understand the skew function’s workings, we will create a mini home page with a list of icons, some text, and a few buttons.

Below is the home page with the skew effect.

Let’s learn the process of creating this effect. If you notice above, there is a skew effect right before the icons. The skewY(-3deg); function was used to skew the footer element along the Y-axis.

The -3deg parameter specifies the angle of the skew:

• Negative Angle: A negative angle (-3deg) tilts the element’s top edge towards the left, creating a leftward slant. Conversely, a positive angle would tilt it towards the right.
• Y-axis Skew: Skewing along the Y-axis means that the horizontal lines of the element remain straight and parallel to each other while the vertical lines tilt, creating the skew effect.

Below is the code CSS responsible for the skew effect:

See the Pen
Applying Multiple Transform in CSS(Skew) by Marvel Ken (@Marvel-Ken)
on CodePen.

In the above code example, the transform skewY(-3deg); property is used to apply the skew effect. This distorts the pseudo-element by tilting it along the Y-axis by -3 degrees, creating a diagonal effect on the top edge of the footer.

For the icons, the skew effect is applied to the .icon:hover class, affecting the list of icons at the bottom of the page. When you hover over the .icon elements, the skew() function tilts the elements by -15 degrees along the X-axis. The negative value means the top side is tilted to the left, creating a leftward slant.

Whenever you hover over the icons, they also skew.

Below is the CSS code responsible for the skew effect on hover:

When you hover over any of the .icon elements, the transform: skew(-15deg); rule is applied. This visually distorts the icons, tilting them to create a dynamic, interactive effect.

Scale Function

The CSS scale() property allows you to resize an element on the 2D plane. It takes one or two values representing the scaling factor along the X and Y axes. By correctly using the CSS scaling property, you can enlarge or shrink an element without affecting its position.

We will use the pricing page below to demonstrate the CSS scale property.

The scaling effect provides immediate visual feedback whenever a user hovers over the pricing card.

Below is the CSS code responsible for the hover effect on the pricing card

See the Pen
Applying Multiple Transform in CSS(Transition and Animation) by Marvel Ken (@Marvel-Ken)
on CodePen.

The CSS code snippet above uses the transform function scale(1.1)to scale up the .pricing-card by 10% along both the X (horizontal) and Y (vertical) axes when hovered over.

The transformation makes the element appear larger, drawing attention to it. Value: 1.1 indicates that the element should be scaled to 110% of its original size in width and height, making it 10% larger than its normal state.

These transform functions can be combined within a single transform property, allowing for complex visual effects. The order of these functions matters as transformations are applied sequentially from left to right.

Implementing CSS Multiple Transform Properties With Transitions

Suppose you have noticed in all the animations that we have had the transition property with us. In that case, you use the transition property to animate a transform (or any other animatable property) over time.

The transition property in CSS controls how long it takes for a change to happen, like in a color change or movement. It can also set the speed and delay of that change. This a basic implementation of the transition property;

Key Transition Properties

Transition Properties	Function
transition-property	This Identifies the CSS property to animate.
transition-duration	Sets the animation duration in seconds (s) or milliseconds (ms).
transition-timing-function	This is responsible for the animation's pace across its duration. Other options include ease, linear, ease-in, ease-out, and ease-in-out.
transition-delay	This Introduces a delay time before the animation starts, specified in seconds (s) or milliseconds (ms). You can read more here!

Flip Card

The flip-card effect is particularly seen in profiles, product cards, games, and quizzes, and it offers a great way to reveal hidden information.

See the Pen
Applying Multiple Transform in CSS(Creating Flip Cards) by Marvel Ken (@Marvel-Ken)
on CodePen.

The example above showcases the smooth implementation of CSS transitions and transforms.

Here’s how the transition and CSS multiple transform properties are effectively utilized:

• 3D Perspective: The .container is given a perspective of 800px, establishing a 3D space. This property enhances the depth effect of the flip animation, making the card appear as if it’s rotating in a real three-dimensional space.
• Flip Animation: The transform: rotateY(180deg); applied to the .card on hover rotates the card around its Y-axis, revealing the .back side. This rotation creates the flip effect.
• Smooth Transition: The transition: transform 1500ms; the .card specifies that the transformation (the flip effect) should occur over 1500 milliseconds (1.5 seconds). This duration ensures a smooth, controlled rotation that is visually pleasing and easy to follow. The transition effect applies to the transform property, making the rotation animate smoothly from 0 to 180 degrees upon hover.

Keyframe Animation With Multiple Transform Properties

CSS keyframes and the CSS multiple transform properties can be combined to create good animations by defining a sequence of style changes over time. Keyframes allow you to specify the start and end points of an animation, as well as any intermediate steps, while CSS multiple transform properties apply the rotate, scale, translate, and skew to the element. Here’s a brief overview of how they work together:

• Keyframes: With @keyframes, you can specify what should happen at specific points during the animation. Each point is defined by percentages, starting from 0% (beginning) to 100% (end), allowing for fine-grained control over the animation’s progression.
• Transform: The CSS transform property modifies an element’s appearance. You can rotate (rotate()), scale (scale()), move (translate()), and tilt (skew()) an element. These transformations can be applied at different stages within a keyframe animation to achieve dynamic visual effects.

For example, you can create a spinner, combining keyframes with CSS multiple transform functions to achieve this loading effect.

See the Pen
Applying Multiple Transform in CSS(Animation with Keyframes) by Marvel Ken (@Marvel-Ken)
on CodePen.

In the example above, the animation name rotateAndScale uses the transform property to rotate and scale the spinner simultaneously.

• At 0% and 100%: The animation starts and ends with the spinner in its original state, with no rotation (rotate(0deg)) and its original size (scale(1)). This ensures a smooth, continuous loop.
• At 25%: The spinner is rotated 90 degrees (rotate(90deg)) and scaled up by 20% (scale(1.2)). This mid-animation increase in size, combined with a quarter rotation, adds visual interest.
• At 50%: The spinner undergoes a 180-degree rotation (rotate(180deg)) and scales up further to 1.5 times its original size (scale(1.5)). This is the peak of the animation’s visual impact.
• At 75%: The spinner rotates 270 degrees (rotate(270deg)) and scales down slightly (scale(1.2)), preparing to return to its original scale. This decrease in size begins to transition the animation toward its starting point, maintaining a smooth engagement.

CSS:

Applying the Animation

The .spinner class applies this animation with:

This CSS rule sets the rotateAndScale animation to run infinitely (infinite) with a duration of 2 seconds and a linear timing function (linear), ensuring the animation proceeds at a constant pace throughout.

To learn more about @keyframes animation properties in detail, refer to this guide on CSS keyframes animation and create a website that looks amazing and unique. You can also learn more about it and related tutorials by subscribing to the LambdaTest YouTube Channel.

By combining CSS multiple transform functions within a single @keyframes animation, the loading spinner effect is not just visually nice. Still, it also engages the user until the loading state is over, a great way to improve user experience during wait times.

Browser Compatibility of CSS Transforms

The CSS transform property has good support on major browsers and does not require vendor prefixes. However, CSS might not behave the same way on every browser. Therefore, it’s important to ensure browser compatibility of websites with CSS multiple transform properties. For this, you can leverage cloud-based testing platforms like LambdaTest.

It is an AI-powered test execution platform that lets you run manual and automated cross-browser testing at scale across 3000+ browsers and OS combinations.

Source

This platform lets you test websites on different browsers to help identify inconsistencies in how your CSS multiple transform properties render across different browsers, ensuring a consistent user experience. It offers various tools like LT Browser to help you view your website’s responsiveness across 53+ device viewports and help you maintain consistency.

To start using LT Browser, simply click the download button below.

Download LT Browser

Watch the video tutorial below to become familiar with the features and functionalities of LT Browser.

Conclusion

As we continue to push the boundaries of what’s possible in web design and development, the thoughtful integration of the CSS multiple transform properties showcases the evolving nature of creating online experiences.

The CSS transform property is a powerful tool in the web developer’s toolkit. Enhancing the user experience is a crucial aspect of web development, and applying CSS multiple transform properties in unison contributes to this goal, making interfaces more dynamic and responsive.

The examples and techniques discussed here illustrate the power of combining transform functions, demonstrating how they can be leveraged to create compelling visual narratives. Mastering CSS transforms involves experimenting, iterating, and learning from the vast community of web professionals. For those looking to dive deeper, resources like the “Top 90+ HTML Interview Questions and Answers” can be invaluable. Keep coding, and let the transformations begin!