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
Selected Reading
Matrix Transform in another direction with CSS
The CSS matrix() transform function allows you to apply complex 2D transformations including scaling, rotating, skewing, and translating elements in different directions. By adjusting the matrix parameters, you can create various transformation effects.
Syntax
transform: matrix(a, b, c, d, tx, ty);
Where:
- a and d − scaling on x and y axis
- b and c − skewing on x and y axis
- tx and ty − translation on x and y axis
Example: Matrix Transform with Skew and Translation
The following example demonstrates how to use matrix transform to skew and move an element in a different direction −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
}
.original {
background-color: lightblue;
}
.transformed {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div class="original">
Original Element
</div>
<div class="transformed">
Matrix Transformed
</div>
</body>
</html>
Two rectangular boxes appear: the first is a light blue box in its original position, and the second is a pink box that has been skewed to the right and translated 150px horizontally, creating a parallelogram effect.
Matrix Parameters Explanation
In the example matrix(1, 0, 0.5, 1, 150, 0):
- 1, 1 − no scaling applied
- 0, 0.5 − skew transformation (0.5 creates a rightward slant)
- 150, 0 − translate 150px right, 0px vertically
Conclusion
The CSS matrix() function provides precise control over 2D transformations. By combining scaling, skewing, and translation parameters, you can create complex directional transforms for creative layouts and animations.
Updated on: 2026-03-15T12:06:13+05:30
129 Views
Advertisements