how to use Rotating, Skew and Multiple background images in CSS3.

Rotating Effects

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

<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 scaleto 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.

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.

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