-
CSS Syntax
-
CSS Selectors
-
CSS How To
-
CSS Comments
-
CSS Colors
-
CSS Backgrounds
-
CSS Borders
-
CSS Margins
-
CSS Padding
-
CSS Dimension
-
CSS Box Model
-
CSS Outline
-
CSS Text
-
CSS Fonts
-
CSS Links
-
CSS Lists
-
CSS Tables
-
CSS Display
-
CSS Overflow
-
CSS Float
-
CSS Align
-
CSS Combinators
-
CSS Pseudo-class
-
CSS Opacity
-
CSS Attr Selectors
-
CSS Forms
-
CSS Transitions
-
CSS Transforms
-
CSS Animations
-
CSS !important
-
CSS Flex
-
CSS GRID
-
CSS Media Queries
CSS Transforms
CSS transforms allow you to manipulate an element’s position, size, and shape in two-dimensional (2D) or three-dimensional (3D) space. This powerful feature enhances the visual appeal and interactivity of web content without the need for complex JavaScript.
Transformations can rotate, scale, skew, or translate (move) elements, providing dynamic visual effects.
Types of Transforms:
1. 2D Transforms
Its Affect elements in the x and y axes.
Common 2D Transform Functions
1. translate(x, y): Moves the element horizontally and vertically.
2. rotate(angle): Rotates the element clockwise from its current position.
3. scale(x, y): Scales the element by a specified factor in the x and y directions.
4. skew(x-angle, y-angle): Skews the element by the given angles along the x and y axes.
Example 1: 2D Rotation
HTML
<div class="box rotate"></div>
CSS
.box {
width: 100px;
height: 100px;
background: red;
transition: transform 1s;
}
.rotate:hover {
transform: rotate(45deg);
}
The .box rotates 45 degrees when hovered.
2. 3D Transforms:
Its extend transformations into the z-axis (depth), requiring a perspective to be set.
Common 3D Transform Functions
1. translate3d(x, y, z): Moves the element in three-dimensional space.
2. rotateX(angle), rotateY(angle), rotateZ(angle): Rotates the element around the respective axes.
3. scale3d(x, y, z): Scales the element in three dimensions.
4. perspective(value): Sets the perspective from which the viewer sees the 3D-transformed element.
Example 2: 3D Translation
HTML:
html
<div class="box translate3d"></div>
CSS:
.container {
perspective: 500px;
}
.box {
width: 100px;
height: 100px;
background: green;
transition: transform 1s;
}
.translate3d:hover {
transform: translate3d(100px, 100px, 50px);
}
The .box moves in 3D space (100px right, 100px down, 50px outward) when hovered. The perspective property on the container creates a sense of depth.
