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

Sheonarayan
Posted by in CSS 3 category on for Intermediate level | Points: 250 | Views : 10979 red flag
Rating: 5 out of 5  
 1 vote(s)

In this article we are going to learn how to use Rotating, Skew and Multiple background images in CSS3.
This article is continuation of my previous article How to use Opacity, Scale and box shadow and Zooming in CSS 3?

If you are new to CSS3, please read my first article by clicking on the above link so that you would get familiar with the browser prefixes used in this article code snippets.
  

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.

Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Vinay13mar on: 11/9/2012 | Points: 25
Very nice article please have look of this and let me know your view.
http://www.dotnetpools.com/Article/ArticleDetiail/?articleId=68&title=Zoom Effect Using Jquery In Asp.Net
Posted by: Arronlee on: 10/22/2013 | Points: 25
Thanks for your nice info. I used to rotate image using some other tools.(http://www.yiigo.com/guides/csharp/how-to-rotate-image.shtml )
I will try to zoom and scale images referring to your tutorials.

Login to post response

Comment using Facebook(Author doesn't get notification)