Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to transform background image using CSS3
HTML stands for Hyper Text Markup Language. It functions as a tool for constructing Web pages as well as an illustration of how one is put together. It consists of a number of parts. Its components provide the browser instructions on how to render the content. The appearance of HTML components in different print and digital media, such as displays and other print and digital forms, is controlled by CSS, or cascading style sheets.
Time is significantly reduced when CSS is used. It enables the concurrent control of several web page designs. In this post, we'll discover how to transform background image using CSS3.
Basic HTML Document
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
The CSS Transform Property
To perform a two-dimensional or three-dimensional transformation to an element, use the CSS transform property. An element can be rotated, scaled, and skewered using the transform attribute.
The coordinate space of the visual formatting model can be altered using the transform attribute in CSS. This is used to add effects to elements, such as skew, rotate, translate, etc.
Syntax
transform: none|transform-functions|initial|inherit;
Following are various transforms available in CSS –
Property |
Function it performs |
|---|---|
None |
There is no transformation. |
matrix(x, x, x, x, x, x) |
It details a 2-D type matrix transformation. It accepts six values. |
matrix3d(x, x, x, x, x, x, x, x, x) |
It describes a 3-D type matrix transformation. 9 values are required. |
translate(x, y) |
The X and Y axes are translated according to the specification. |
translate3d(x, y, z) |
It designates an X, Y, and Z axis translation. |
translateX(x) |
Only the translation along the X-axis is specified. |
translateY(y) |
Only the translation along the Y-axis is specified. |
translateZ(z) |
Only the translation along the Z-axis is specified. |
rotate(angle) |
It details the rotational angle. |
rotateX(angle) |
It defines the rotation and the X-axis that corresponds to the rotation's angle. |
rotateY(angle) |
It defines the rotation and the Y-axis that corresponds to the rotation's angle. |
rotateZ(angle) |
It defines the rotation and the Z-axis that corresponds to the rotation's angle. |
scale(x, y) |
The scale transformation along the X and Y axes is specified. |
scale3d(x, y, z) |
The scale transformation along the X and Y axes is specified. |
scaleX(x) |
It defines the X-axis scale transformation. |
scaleY(y) |
It defines the Y-axis scale transformation. |
scaleZ(z) |
It defines the Z-axis scale transformation. |
scale3d(x, y, z) |
Along the X, Y, and Z axes, the scale transformation is specified. |
skew(angle, angle) |
The skew transformation along the X and Y axes that correspond to the skew angles is specified. |
skewX(angle) |
Along with the X-axis that corresponds to the skew angle, it describes the skew transformation. |
skewY(angle) |
Along with the Y-axis that corresponds to the skew angle, it describes the skew transformation. |
SkewZ(angle) |
Along with the Z-axis that corresponds to the skew angle, it describes the skew transformation. |
perspective(x) |
It describes an element's perspective. Consider the perspective attribute. |
initial |
The element is initialized to its default value. |
inherit |
The value from its parent element is inherited by it. |
Syntax
.class_name { transform: value };
To prevent the overlapping effect, add the overflow: hidden to the parent component with the transform property. HTML code without transformation −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>transform</title>
</head>
<body>
<div class="parent">
<div>
<img src="https://www.tutorialspoint.com/images/test.png" class="child" />
</div>
</div>
</body>
</html>
Let’s understand the HTML Code for rotate −
We will use two div inside the body of the page.
The First div is given a class of parent.
We will apply the margin-top of 15% and margin-left of 10%.
And the second div is used to contain the image which says transform and is given a class child.
We will apply transform: rotate(50deb) to the class child.
Example
HTML Code after using transform −
<!DOCTYPE html>
<html lang="en">
<head>
<title>transform</title>
<style>
div.parent {
margin-top: 15%;
margin-left: 10%;
}
.child {
transform: rotate(50deg);
}
</style>
</head>
<body>
<div class="parent">
<div>
<img src="https://www.tutorialspoint.com/images/test.png" class="child" />
</div>
</div>
</body>
</html>
Let’s understand the HTML Code for scale −
We will use two div inside the body of the page.
The First div is given a class of parent.
We will apply the margin-top of 15% and margin-left of 10%.
And the second div is used to contain the image which says transform and is given a class child.
We will apply transform: scale(2.0) to the class child.
Example
HTML Code after using transform using scale −
<!DOCTYPE html>
<html lang="en">
<head>
<title>transform</title>
<style>
div.parent {
margin-top: 15%;
margin-left: 10%;
}
.child {
transform: scaleY(2.0);
}
</style>
</head>
<body>
<div class="parent">
<div>
<img src="https://www.tutorialspoint.com/images/logo.png" class="child" />
</div>
</div>
</body>
</html>
Let’s understand the HTML Code for skew −
We will use two div inside the body of the page.
The First div is given a class of parent.
We will apply the margin-top of 15% and margin-left of 10%.
And the second div is used to contain the image which says transform and is given a class child.
We will apply transform: skew(20deg) to the class child.
Example
HTML Code after using transform using skew −
<!DOCTYPE html>
<html lang="en">
<head>
<title>transform</title>
<style>
div.parent {
margin-top: 15%;
margin-left: 10%;
}
.child {
transform: skewY(20deg);
}
</style>
</head>
<body>
<div class="parent">
<div>
<img src="https://www.tutorialspoint.com/images/logo.png" class="child" />
</div>
</div>
</body>
</html>
Conclusion
In this article, first, we learned about HTML and CSS then we looked at transform and all its properties. Then we used it to write a program to transform background image.
1K+ Views
