3.1 Basics of Combined Transformations
CSS lets you combine multiple transformations to create complex visual effects. These transformations can include translate, rotate, scale, and skew, which can be combined into a single transform property.
The transform property can contain multiple transformation functions, separated by spaces. They will be applied in sequence, in the order they are specified. Understanding how different transformations interact with each other is key to creating complex animations and effects.
Syntax:
element {
transform: function1() function2() ... functionN();
}
Example:
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
Moving and Rotating
In this example, the element moves 50 pixels to the right and 50 pixels down, then rotates 45 degrees.
Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving and Rotating</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Explanation:
.box: the element first moves 50 pixels to the right and down, then rotates 45 degrees clockwise
3.2 Exploring Different Combinations
1. Scaling and Skewing
In this example, the element is scaled 1.5 times along both axes, then skewed 20 degrees along the X-axis and 10 degrees along the Y-axis.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scaling and Skewing</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Explanation:
.box: the element is first scaled 1.5 times along both axes, then skewed 20 degrees along the X-axis and 10 degrees along the Y-axis
2. Moving, Rotating, and Scaling
In this example, the element moves 100 pixels to the right, rotates 30 degrees, and scales 2 times along the X-axis and 1.5 times along the Y-axis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving, Rotating, and Scaling</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Explanation:
-
.box: the element first moves 100 pixels to the right, then rotates 30 degrees, and scales 2 times along the X-axis and 1.5 times along the Y-axis
3.3 Impact of Transformation Order
When multiple transformations are combined, it's important to understand that they are applied in sequence. This means each subsequent transformation will affect the result of the previous one.
This example demonstrates how changing the order of transformations affects the final result.
Example A: Rotate first, then move
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate First, Then Move</title>
<style>
.box-a {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg) translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box-a"></div>
</body>
</html>
Example B: Move first, then rotate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Move First, Then Rotate</title>
<style>
.box-b {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box-b"></div>
</body>
</html>
Code Explanation:
-
.box-a: the element first rotates 45 degrees, then moves 50 pixels right and down, causing the element to move diagonally from its new rotated position -
.box-b: the element first moves 50 pixels right and down, then rotates 45 degrees, causing the element to rotate around its new position
GO TO FULL VERSION