Home » CSS » CSS Rotate Image Example

About Fabio Cimo

Fabio Cimo
Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

CSS Rotate Image Example

In this example, we will consider image rotation using css.

CSS offers a specific property called transform to do this.

This property can take a lot of attributes, but we will only consider rotation.

Image rotation will be needed on certain occasions when you want to create your personalized view of image positioning and have a fancier look.

All browsers support the transform property, with their own prefixes:
-ms-transform for IE, -webkit-transform for Chrome, Opera, Safari etc.

Lets first look at the basics and then something more on it.
 

1. Basic Setup & Application

First, go ahead and create a blank html document and then add the basic syntax inside like so:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Image Rotate Example</title>
</head>
<body>
<!-- STYLE  SECTION -->
<style type="text/css">

</style>

<!-- HTML SECTION  -->

</body>
</html>
</pre>

Now add an img tag in the html section with an image inside like this:

<!-- HTML SECTION  -->
	
<img src="image.jpg">

To apply rotation, follow this syntax: transform: rotate(10deg); where:

1. transform is the attribute given to the img

2. rotate is the value of the attribute

3. (10deg) specifies at what scale should the value be applied.

With this said, the basic image rotation application would be:

<!-- STYLE  SECTION -->

<style type="text/css">

img {      transform: rotate(10deg);        }

</style>

Now you should see a rotated image on the browser, by 10 degrees:

Basic Image Rotation Application

Basic Image Rotation Application

2. Cases and Examples

In this section, we will go through some cases where you can use and how the image rotation.

In the html area, I will add 5 images so that we can create a collage like view of the images.

<!-- HTML SECTION  -->

<img class="img1" src="image.jpg">
<img class="img2" src="image1.jpg">
<img class="img3" src="image2.jpg">
<img class="img4" src="image3.jpg">
<img class="img5" src="image4.jpg">

Lets wrap images inside a border and a shadow and give odd numbers a -10deg rotation and even numbers 10deg:

1. box-shadow – each image is going to have a light gray shadow surrounding it.

2. border – borders are going to be placed around images in a gray color.

3. transform: rotate – first image will have a -10deg rotation, second a 10deg rotation and so on.

Coding the css part would be easy:

<!-- STYLE  SECTION -->

<style type="text/css">

.img1 {
	transform: rotate(-10deg);
	border: 0.8em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 1em #ccc;
}


.img2 {
	transform: rotate(10deg);
	border: 0.8em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 1em #ccc;
}

.img3 {
	transform: rotate(-10deg);
	border: 0.8em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 1em #ccc;
}

.img4 {
	transform: rotate(10deg);
	border: 0.8em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 1em #ccc;
}

.img5 {
	transform: rotate(-10deg);
	border: 0.8em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 1em #ccc;
}

</style>

The view of this nice photo collage in the browser would be:

Photo Collage created using CSS Rotation

Photo Collage created using CSS Rotation

You choose positive values to rotate the images in the clockwise direction, and minus values to rotate counterclockwise.

Another example of the usage of image rotation would be a vertical gallery with inline descriptions. In this case, images are wrapped inside divs to display them in block view. Look at the html below:

<!-- HTML SECTION  -->

<div><img class="img1" src="image.jpg"></div>
<div><img class="img2" src="image1.jpg"></div>
<div><img class="img3" src="image2.jpg"></div>
<div><img class="img4" src="image3.jpg"></div>
<div><img class="img5" src="image4.jpg"></div>

Now the CSS will have very slight changes (in this case, only the degree has changed and some size elements):

<!-- STYLE  SECTION -->

<style type="text/css">

body {
	font-family: "Montserrat";
}

.img1 {
	transform: rotate(7deg);
	border: 0.5em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 0.5em #ccc;
}


.img2 {
	transform: rotate(-8deg);
	border: 0.5em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 0.5em #ccc;
}

.img3 {
	transform: rotate(7deg);
	border: 0.5em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 0.5em #ccc;
}

.img4 {
	transform: rotate(-8deg);
	border: 0.5em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 0.5em #ccc;
}

.img5 {
	transform: rotate(7deg);
	border: 0.5em solid #f4f4f4;
	box-shadow: 0.5em 0.5em 0.5em #ccc;
}

</style>

So you can have a vertical view of these rotated images and place your description inline:

A Vertical Photo Gallery with Inline Description

A Vertical Photo Gallery with Inline Description

Well, that is a clue of what you can do using the image rotation in css.

3. Conclusion

It seems like a small part of css, and it is somehow, but the transform property with rotate(xdeg) value applied can fundamentally change the way you think of images inside a webpage and rethink ways you can organise them.

It is very easy to use and create beautiful gallery-like sets of images placed on various degrees.

A 180 deg rotation would mean an upside down view while a 360 deg would mean no changes in the view, a full rotation.

4. Download

Download
You can download the full source code of this example here: CSS3 Image Rotate
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments