How to use Rotating, Skew and Multiple background image in CSS3?

Rotating Effects

Rotate effect is used to rotate the HTML element. Rotate accepts one parameter ie. Degree.

Get HTML 5 and CSS3 Online Training and 500+ ASP.NET web development Tips & Tricks here.

<style type="text/css">
ul.myGallery li
{
float:left;
list-style:none;
border:1px solid #c0c0c0;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}

ul.myGallery li:hover
{
-webkit-transform: scale(1.5) rotate(-10deg);
-moz-transform: scale(1.5) rotate(-10deg);
transform: scale(1.5) rotate(-10deg);

-webkit-box-shadow: 4px 4px 10px red;
-moz-box-shadow: 4px 4px 10px red;
box-shadow: 4px 4px 10px red;
}
</style>

<ul class="myGallery">
<li>
<img src="images/dotnetlogo.gif" /></li>
<li>
<img src="images/iconnectin.gif" /></li>
<li>
<img src="images/itfunda.gif" /></li>
<li>
<img src="images/myfundalogo.gif" /></li>
</ul>

In the above code snippet, transform css style has scale as well as rotate css property style. As the rotate has degree as -10 so when user mouse over the image, it rotates to -10 degree with scale to 1.5 times its current height and width. I have added Scale effect just to make my effects better, it is not mandatory to add Scale with the rotate. Scale property is covered in my last article.

Specifying the transition property in the first CSS class changes the Scale and Rotates properties considering the transition values.

Output

Skew Effects

Skew is used to skew (horizontally and vertically change the angle of the element) the element to a certain degree. Skew accepts 1st parameter as horizontal angle (x coordinate) and 2nd parameter as vertical angle (y coordinate).

<style type="text/css">
ul.myGallery li
{
float: left;
list-style: none;
border: 1px solid #c0c0c0;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}

ul.myGallery li:hover
{
-webkit-transform: scale(1.5) skew(-10deg, 45deg);
-moz-transform: scale(1.5) skew(-10deg, 45deg);
transform: scale(1.5) skew(-10deg, 45deg);

-webkit-box-shadow: 4px 4px 10px red;
-moz-box-shadow: 4px 4px 10px red;
box-shadow: 4px 4px 10px red;
}
</style>

<ul class="myGallery">
<li>
<img src="images/dotnetlogo.gif" /></li>
<li>
<img src="images/iconnectin.gif" /></li>
<li>
<img src="images/itfunda.gif" /></li>
<li>
<img src="images/myfundalogo.gif" /></li>
</ul>

In the above code snippet, transform has scale as well as skew css style property that scale as well as skew the image on mouse over.

Output

Multiple background Effects of the image

Multiple background images can be implemented separating multiple background properties separated by comma (,). In below code snippet, two background images have been specified separated by comma and to set their position, I have set their position as well separated by comma.

<style type="text/css">
body
{
background-image: url('images/dnfmvp.gif'), url('images/dotnetlogo.gif');
background-position: left, right;
background-repeat: no-repeat;
}
</style>
 

Output

Hope this article was useful. Thanks for reading and hope that you liked this article.

If you liked this article, do subscribe for the RSS feed and share this article with your friends and colleague by clicking on below icons.

To read my series of articles on ASP.NET,  CSS3, HTML5, click here.