Transformations: Scale, Rotate, Translate
CSS Transformation helps you to modify and manipulate the webpage object element in any HTML website in multiple ways. Where you can manually scale the website element object, rotate the element object and element object translation features are included. In which transformation in your simple webpage object element improves the web visitor user experience by adding advanced effects and attributes to the user interface design.
So, let’s understand CSS transformation features in HTML webpage.
Basic CSS Transformation Properties.
Here you get some CSS translation properties default for webpage CSS transformation attributes in HTML website.
CSS Transformation Properties.
- CSS Transform – CSS transformation properties in existing HTML webpage helps to apply 2-dimensional and 3-dimensional transformation attributes to any particular webpage element.
- CSS Transform-Origin – The CSS Transformation property determines the origin point for an element object in the current HTML webpage.
Types of Transformation in CSS.
Css Scale Transformation.
The CSS Scale Transformation replaces the default shape of a webpage element object in the current HTML webpage. Where you specify the scaling object for the X and Y axis angles of the CSS Scale object.
Css Scale Transformation syntax.
transform: scale(sx, sy);
Css Scale Transformation Example.
.scale-transformation {
transform: scale(1.2, 1.2); /* it used to scale sx or sy object at 1.2 scale */
}
Css Rotate Transformation.
The CSS Rotate Transformation rotates or moves a website object element around a particular point in the current HTML webpage.
Css Rotate Transformation syntax.
transform: rotate(angle);
Css Rotate Transformation Example.
.rotate- transformation {
transform: rotate(50deg); /* it used to Rotates the element 50 degrees angle */
}
Css Translate Transformation.
The CSS Translate Transformation moves an object or element from its exact position in the current HTML webpage.
Css Translate Transformation Syntax.
transform: translate(tx, ty);
Css Translate Transformation Example.
.translate- transformation {
transform: translate(40px, 90px); /* it used to Moves the element 40px right and 90px down order */
}
Combining Transforms in CSS.
You can group and display multiple CSS transformation properties in a CSS object element in your existing HTML webpage by separating them with empty spaces in a combined transformation property.
Combining Transforms CSS Example.
.combined- transformation {
transform: scale(1.4) rotate(40deg) translate(70px, 110px);
}
Transform Origin in CSS.
You can use the transform-origin property in a CSS object element in your existing HTML webpage to replace the transformation pivot point where the first CSS transformation attribute was applied.
Transform Origin CSS syntax.
transform-origin: x-axis y-axis;
Transform Origin CSS Example.
.transform-origin- transformation {
transform-origin: top left; /* it used to Sets the origin object to the top-left corner order */
transform: rotate(70deg); /* it used to Rotates around the top-left corner object */
}
Example of css scale, rotate, and translate transformations in HTML webpage.
Here is an example displaying CSS scale, rotate, and translate transformation attributes in an HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray CSS Transformations Properties Example</title>
<style>
body {
display: flex;
font-family:monotype corsiva;
justify-content: space-around;
font-size: 1.1em;
font-weight: bold;
align-items: center;
height: 120vh;
background-color: white;
margin: 4;
padding:4;
}
.box-element {
width: 110px;
height: 110px;
background-color: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
transition: transform 0.9s ease; /* it displays Smooth transformation */
}
.scale-css-transformation {
background-color: orange;
color:black;
transform: scale(1.2); /* it used to scale css element */
}
.rotate-css-transformation {
background-color: teal;
color:white;
transform: rotate(34deg); /* it used to rotate css element */
}
.translate-css-transformation {
background-color: aqua;
color:black;
transform: translate(40px, 40px); /* it use to move css element */
}
.combined-css-transformation {
background-color: blue;
color:white;
transform: scale(1.4) rotate(40deg) translate(30px, 30px); /* it use to Combined multiple css transformations properties */
}
</style>
</head>
<body>
<div class=”box-element scale-css-transformation”><center>Scale Transformation Preview</center></div>
<div class=”box-element rotate-css-transformation”><center>Rotate Transformation Preview</center></div>
<div class=”box-element translate-css-transformation”><center>Translate Transformation Preview</center></div>
<div class=”box-element combined-css-transformation”><center>Combined Transformation Preview</center></div>
</body>
</html>
Css File for Transformation.
body {
display: flex;
font-family:monotype corsiva;
justify-content: space-around;
font-size: 1.1em;
font-weight: bold;
align-items: center;
height: 120vh;
background-color: white;
margin: 4;
padding:4;
}
.box-element {
width: 110px;
height: 110px;
background-color: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
transition: transform 0.9s ease; /* it displays Smooth transformation */
}
.scale-css-transformation {
background-color: orange;
color:black;
transform: scale(1.2); /* it used to scale css element */
}
.rotate-css-transformation {
background-color: teal;
color:white;
transform: rotate(34deg); /* it used to rotate css element */
}
.translate-css-transformation {
background-color: aqua;
color:black;
transform: translate(40px, 40px); /* it use to move css element */
}
.combined-css-transformation {
background-color: blue;
color:white;
transform: scale(1.4) rotate(40deg) translate(30px, 30px); /* it use to Combined multiple css transformations properties */
}
Using Transform Properties on Hover in CSS.
You can develop interactive webpage element objects by applying transformation effects to CSS object element hover attributes in your existing HTML webpage.
Hover transformation properties example.
.box:hover-transformation {
transform: scale(1.3) rotate(20deg); /* it used to Scale 1.3 and rotate 20degree on hover action */
}
Applying CSS Transformation Attributes to HTML Webpage Conclusion.
CSS transformation attributes in any HTML webpage is a powerful tool to enhance your webpage design, provide webpage deep web visitor experience and website user interface interactivity. By using scale attributes, rotate attributes and transformation properties in effective order as per your web development needs, you can develop a dynamic and commercial user interface for web visitors.
