- Trending Categories
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 Rotate Container Background Image using CSS?
To rotate container background image using CSS, is a powerful tool to control and enhance the visual presentation of a website. In this article, we will be understanding three different approaches to rotate container background image Using CSS.
We are having a background image in a div container, our task is to rotate container background image using CSS.
Approaches to Rotate Container Background Image Using CSS
Here is a list of approaches to rotate container background image using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Rotate using rotate() Function
To rotate container background image using CSS, we will be using rotate() function of transform property. It rotates any element around a fixed point on the two-dimensional surface.
- We have used a container class for creating a box using CSS height and width properties for setting it's dimension, added a border and set it's left and top margin using margin-left and margin-top properties.
- We have used CSS background-image property to set the background image of the container, disabled it's repetition using background-repeat, set the dimension and applied a transition for smooth rotation of container.
- Then, we have used "transform: rotate(45deg);" to rotate the image by 45deg upon hovering using hover psuedo class.
Example
Here is a complete example code implementing above mentioned steps to rotate container background image using rotate() function.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
width: 300px;
border: 1px solid black;
margin-left: 80px;
margin-top: 120px;
}
.image {
background-image: url(/html/images/test.png);
background-repeat: no-repeat;
height: 80px;
width: 350px;
transition: transform 0.5s ease;
}
.image:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<h3>
To Rotate Container Background Image
using CSS
</h3>
<p>
In this example we have used transform
<strong>rotate()</strong> method to
rotate an image using CSS. Hover over
image to see the rotation.
</p>
<div class="container image"></div>
</body>
</html>
Rotate using matrix() Function
In this approach, we will be using matrix() function of transform property which creates homogeneous 2D transformation matrix where first four arguments specifies linear transformation and last two specifies translation on x and y-axis respectively.
- In this approach, first two steps are same as the first approach for creating a box and setting a background image for that box.
- Then, we have used "transform: matrix();" to rotate the div element upon hovering using hover psuedo class.
Example
Here is a complete example code implementing above mentioned steps to rotate container background image using matrix() function.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
width: 300px;
border: 1px solid black;
margin-left: 80px;
margin-top: 120px;
}
.image {
background-image: url(/html/images/test.png);
background-repeat: no-repeat;
height: 80px;
width: 350px;
transition: transform 0.5s ease;
}
.image:hover{
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
</style>
</head>
<body>
<h3>
To Rotate Container Background Image
using CSS
</h3>
<p>
In this example we have used transform
<strong>matrix()</strong> method to
rotate the background-image using CSS.
Hover over image to see the rotation.
</p>
<div class="container image"></div>
</body>
</html>
Rotate using rotate3d() Function
In this approach to rotate container background image using CSS, we will be using rotate3d() function which rotates element around a fixed axis on the three-dimensional surface.
- In this approach, first two steps are same as the first approach for creating a box and setting a background image for that box.
- Then, we have used "transform: rotate3d(2, 1.8, 1, 45deg);" to rotate the div element by 45deg upon hovering using hover psuedo class.
Example
Here is a complete example code implementing above mentioned steps to rotate container background image using rotate3d() function.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
width: 300px;
border: 1px solid black;
margin-left: 80px;
margin-top: 120px;
}
.image {
background-image: url(/html/images/test.png);
background-repeat: no-repeat;
height: 80px;
width: 350px;
transition: transform 0.5s ease;
}
.image:hover{
transform: rotate3d(2, 1.8, 1, 45deg);
}
</style>
</head>
<body>
<h3>
To Rotate Container Background Image
using CSS
</h3>
<p>
In this example we have used transform
<strong>rotate3d()</strong> method to
rotate the background-image using CSS.
Hover over image to see the rotation.
</p>
<div class="container image"></div>
</body>
</html>
Conclusion
In this article we have understood how to rotate container background image using CSS. We have discussed three approaches to rotate container background image which are: by using rotate() function, by using matrix() function and by using rotate3d() function. Out of all three rotate() function is mostly used for rotation but you can use any approach according to your requirement.
9K+ Views
