Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to apply multiple transform property to an element using CSS?
The CSS transform property allows you to apply multiple transformations to an element simultaneously. You can combine different transform functions like rotate(), scale(), and translate() to create complex visual effects.
Syntax
selector {
transform: function1(value) function2(value) function3(value);
}
Method 1: Multiple Transform Functions in Single Declaration
The most efficient way to apply multiple transformations is by combining transform functions in a single declaration separated by spaces
Example
This example applies rotation and scaling transformations on hover
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
transition: transform 0.3s ease;
cursor: pointer;
}
.container:hover {
transform: rotate(15deg) scale(1.2);
}
</style>
</head>
<body>
<div class="container">
Hover Me!
</div>
</body>
</html>
A blue box with white text "Hover Me!" appears. When hovered, it rotates 15 degrees and scales to 120% of its original size with a smooth transition.
Method 2: Complex Multiple Transformations
You can combine translate, rotate, and scale functions for more complex effects
Example
This example demonstrates combining translate, rotate, and scale transformations
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
margin: 100px auto;
transition: transform 0.5s ease;
}
.transform-basic {
transform: translate(50px, 20px) rotate(30deg) scale(0.8);
}
.transform-complex {
transform: translate(100px, 50px) rotate(-20deg) scale(1.3);
}
</style>
</head>
<body>
<h4>Original:</h4>
<div class="box"></div>
<h4>Basic Multiple Transform:</h4>
<div class="box transform-basic"></div>
<h4>Complex Multiple Transform:</h4>
<div class="box transform-complex"></div>
</body>
</html>
Three red squares are displayed: 1. Original square in center position 2. Second square moved right and down, rotated 30 degrees clockwise, and scaled to 80% 3. Third square moved further right and down, rotated 20 degrees counterclockwise, and scaled to 130%
Method 3: Using Nested Elements
For independent control over different transformations, you can nest elements and apply different transforms to each
Example
This example uses nested divs to apply transformations independently
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
width: 150px;
height: 150px;
background-color: #9b59b6;
margin: 100px auto;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
}
.inner {
width: 80px;
height: 80px;
background-color: #f39c12;
transform: scale(1.2) translate(10px, -10px);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
A purple square rotated 45 degrees contains an orange square that is scaled larger and slightly offset, creating a layered transformation effect.
Key Points
- Transform functions are applied from right to left in the declaration
- Multiple functions in one declaration are more performant than nested elements
- Always include transition properties for smooth animations
- Order of transform functions affects the final result
Conclusion
CSS allows multiple transform properties through function chaining in a single declaration or by nesting elements. The single declaration method is more efficient, while nested elements provide greater control over individual transformations.
5K+ Views
