2D transforms
- As we know, in CSS, we can do every type of decoration or design to an element. Sometimes we have to decorate an element by its shape, size, and position. There we can use the transformation property. In 2D transformation, an element can be arranged along with its X-axis and Y-axis. There are six main types of transformation.
- translate()
- rotate()
- scale()
- skewX()
- skew()
- matrix()
translate()
When we need to move an element along with its X-axis and Y-axis from its actual position then we use translate().
Ex-
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
.trans {
font-size: 35px;
margin: 10px 0;
margin-left: 80px;
}
img {
border: 1px solid black;
transition-duration: 2s;
-webkit-transition-duration: 2s;
}
img:hover {
transform: translate(100px, 100px);
/* prefix for IE 9 */
-ms-transform: translate(100px, 100px);
/* prefix for Safari and Chrome */
-webkit-transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div class=”trans”>Translate() Method</div>
<imgsrc=
“https://media.higher.org/wp-content/uploads/forest-9.png”
alt=”GFG” />
</body></html>
rotate()
This is used to rotate an element clockwise or anti-clockwise along with the degree value as per our requirements.
Ex-
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
.transs {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class=”transs”>Rotation() Method</div>
<imgsrc=
“https://media.rivers.org/wp-content/uploads/nomain-9.png”
alt=”GFG” />
</body>
</html>
scale()
When we need to increase or decrease the size of an element, then we use this property. Because sometimes, the real image size can’t fit as per the height and width. So we have to change the size as per height and width.
Ex-
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: scale(1, 2);
/* Safari */
-webkit-transform: scale(1, 1);
/* Standard syntax */
transform: scale(1, 2);
}
.transss {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class=” transss “>Scale() Method</div>
<imgsrc=
“https://media.fgklf.org/wp-content/uploads/gh-9.png”
alt=”GFG” />
</body></html>
skewX()
This method is used to skew an element. It happens on X-axis.
Ex-
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
.tranns {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class=” tranns “>skewX() Method</div>
<imgsrc=
“https://media.fgf.org/wp-content/uploads/jhk-9.png”
alt=”GFG” />
</body>
</html>
skewY()
This method is used to skew an element. It happens on Y-axis.
Ex-
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
.ttrans {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class=” ttrans “>skewY() Method</div>
<imgsrc=”https://media.dfgv.org/wp-content/uploads/joy-9.png” alt=”GFG” />
</body></html>
skew()
This method skews an element in both X-axis and the Y-axis. The degree value can be the same or different as per our requirements.
Ex-
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skew(20deg, 10deg);
/* Safari */
-webkit-transform: skew(20deg, 10deg);
/* Standard syntax */
transform: skew(20deg, 10deg);
}
.transform {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class=”transform”>skew() Method</div>
<imgsrc=
“https://media.rkljgnmkl.org/wp-content/uploads/fgt-9.png”
alt=”GFG” />
</body>
</html>
matrix()
It is used when we need to use all the methods of 2D transformation properties in a single page. We can take all six properties here like matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ).
Let’s take en example –
Ex-
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
.trans1 {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class=”trans1″>matrix() Method</div>
<imgsrc=
“https://media.dv.org/wp-content/uploads/fgrf-9.png”
alt=”GFG” />
</body>
</html>
3D transforms
In the above section, we learned that we could work on both X-axis and Y-axis in 2D transformation. But in 3D transformation, we can work with Z-axis also.
The rotate function
It allows us to work with Z-axis.
Ex-
<style>
.standard {
background-color: aliceblue;
border: 1px solid black;
width: 300px;
padding: 25px;
margin-top: 20px;
}
.standard.rotate {
transform: rotateZ(90deg);
}
</style>
<div class=”standard”>
A standard element
</div>
<div class=”standard rotate”>
Element rotated in Z-axis.
</div>
Transform Properties
Transform => We can change by 2D or 3D transformation.
transform-origin => To change the position of transformed elements.
transform-style => How nested elements can be rendered in 3D view.
perspective-origin => Bottom position of 3D elements can be determined.
backface-visibility=> The element can be visible or not.
FAQs
What are 2D and 3D transforms?
2D and 3D transforms are techniques used in computer graphics to change the position, size, orientation, and shape of objects in a two-dimensional or three-dimensional space. These transformations are fundamental for creating animations, visual effects, and interactive user interfaces in both 2D and 3D environments.
What types of transformations can be applied in 2D space?
In 2D space, common transformations include:
-
- Translation: Moving an object along the x and y axes.
- Rotation: Rotating an object around a specific point.
- Scaling: Resizing an object by increasing or decreasing its dimensions.
- Shearing: Distorting an object by skewing its shape along one axis.
- Reflection: Flipping an object across a line (axis of reflection).
What types of transformations can be applied in 3D space?
In 3D space, transformations are similar to those in 2D but with an additional axis (z-axis) for depth. Common 3D transformations include:
-
- Translation: Moving an object along the x, y, and z axes.
- Rotation: Rotating an object around an arbitrary axis in 3D space.
- Scaling: Resizing an object along the x, y, and z axes independently.
- Shearing: Distorting an object along multiple axes.
- Perspective Projection: Representing 3D objects on a 2D surface with realistic depth perception.
How are 2D and 3D transforms implemented in computer graphics?
2D and 3D transforms are implemented using mathematical matrices and vectors. Each transformation is represented by a transformation matrix, which is multiplied with the coordinates of the object’s vertices to produce the transformed vertices. Graphics libraries and frameworks like OpenGL, WebGL, DirectX, and various JavaScript libraries provide APIs for performing these transformations efficiently.
What are some practical applications of 2D and 3D transforms?
-
- User Interfaces: Transforming UI elements for animations, transitions, and responsive design.
- Games: Moving, rotating, and scaling game objects to simulate motion and interaction.
- Virtual Reality (VR) and Augmented Reality (AR): Transforming virtual objects to create immersive experiences.
- Data Visualization: Representing complex data in a visually appealing and interactive manner using 2D and 3D graphics.
