point.comTransforms in CSS
CSS Transforms let you rotate, scale, translate, and skew elements on a webpage. You can combine them with CSS transitions or animations to create complex effects. With these 2D and 3D transforms, you can create interactive and dynamic webpages.
In this guide, we’ll cover all the different types of CSS transforms with syntax, examples, and when to use them.
CSS Transform Syntax
The syntax for applying a CSS transform looks like this:
transform: transform-function(value);
- transform-function: Specifies the transformation type (rotate, scale, translate, etc.).
- value: Defines the amount of transformation (e.g., degrees for rotation, pixels for translation, etc.).
Types of CSS Transforms
There are several types of transformations available in CSS. Let’s explore each one in detail.
Translate (Move Elements)
The translate() function allows you to move an element along the X and Y axes. It is used for moving elements relative to their normal position.
- translateX(px): Moves the element horizontally.
- translateY(px): Moves the element vertically.
- translate(tx, ty): Moves the element both horizontally and vertically.
Example: Moving an Element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translate Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.3s ease;
}
.box:hover {
transform: translate(150px, 100px); /* Moves the box 150px right and 100px down */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Rotate (Rotate Elements)
The rotate() function allows you to rotate an element by a specified angle. The value is in degrees (deg).
- rotate(deg): Rotates the element clockwise by the specified degree.
Example: Rotating an Element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s ease;
}
.box:hover {
transform: rotate(45deg); /* Rotates the box by 45 degrees */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- When you hover over the .box, it rotates by 45 degrees clockwise due to the transform: rotate(45deg) property.
- The transition: transform 0.5s ease makes the rotation smooth.
Transform Origins
The default origin for transformation is the center of the element. To change the origin for the transformation, use the transform-origin property.
Syntax
transform-origin: x-axis y-axis;
- x-axis: Specifies the horizontal axis (can be values like left, center, right, or pixel/percentage values).
- y-axis: Specifies the vertical axis (can be values like top, center, bottom, or pixel/percentage values).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Origin Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s ease;
transform-origin: top left; /* Rotation happens around the top left corner */
}
.box:hover {
transform: rotate(45deg); /* Rotates the box around the top left corner */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Quickly Find What You Are Looking For
OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.
Color Picker
