Rotated Images with CSS3

I have been playing around with a lot of CSS3 lately due to PressWork, and I’ve come up with some cool tricks. One that I really like uses the transform style to create a rotated image. If you surround it with a div container and mask the outer edges, you get a pretty awesome effect.
Let’s take a look at the HTML required:

That is pretty straightforward enough and it gives us something like this:

We need some CSS to get it looking how we want:

.image-box img {
   transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   }

That gives us:

Not exactly what we want, but we’re getting there.
Let’s crop the div container to mask out the image’s edges:

.image-box {
   width: 200px;
   height: 150px;
   overflow: hidden;
   }

Our image now looks like this:

We need to center it within the div container and that requires a few modifications to the CSS:

.image-box {
   width: 200px;
   height: 150px;
   overflow: hidden;
   position: relative;
   }
.image-box img {
   transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -100px 0 0 -150px;
   }

That’s exactly what we want. It might look a little plain but now that you have the basic idea, you can add some more CSS to make it look even better:

.image-box {
   width: 200px;
   height: 150px;
   overflow: hidden;
   position: relative;
   border: 5px solid #eee;
   box-shadow: 0 0 1px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 0 1px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3);
   }
.image-box img {
   transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -100px 0 0 -150px;
   }

With CSS3 you no longer need to rely on something like Photoshop to get certain effects on your images. All it takes is a few lines of CSS3.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie