CSS3 vs Photoshop: Transforms

It’s time for some more CSS3 vs. Photoshop, and on this occasion we’re going to dig into transforms. Changing an object’s shape is a huge part of any graphic editor’s toolset. These days, with CSS3 we can rotate, scale, and skew an element’s shape without the need for Photoshop. Let’s try it!

Note: All the following examples were tested on Mozilla Firefox, Safari and Chrome. If you want to get something similar in IE or any other browser leave a comment and I will be glad to help you.

Before We Get Started

In this tutorial we will use Gradient Backgrounds, Box Shadows and Multiple Images Backgrounds as well as Transition effects and Opacity and Transparency styles, topics covered in the first three tutorials of this series:

• CSS3 vs. Photoshop: Complex Backgrounds
• CSS3 vs. Photoshop: Rounded Corners and Box Shadows
• CSS3 vs. Photoshop: Opacity and Transparency

Step 1: Rotate

Rotating an element is one of the more basic features of any graphic editor. The Rotation effect uses a Radial Coordinates value with angles from 0 to 180 (both positive and negative). A positive angle becomes a clockwise rotation and a negative angle means a counter clockwise rotation.

In the past it was typically very complicated to rotate an element in HTML, now with CSS3 everything is very simple:

Here are the syntaxes of a Rotation Transform:

transform: rotate( <number> deg);

Now set a bunch of different angle rotations for HTML sections:

/*Transforms*/
/*Rotate 15 degrees*/
.rotate15{
	-moz-transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
}
/*Rotate 45 degrees*/
.rotate45{
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
/*Rotate -30 degrees*/
.rotate-30{
	-moz-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
}
/*Rotate 180 degrees (Inverted text)*/
.rotate180{
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
/*Rotate 270 degrees (Vertical text)*/
.rotate270{
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
}

As you can see, the manner with which we determine transformations is exactly as in Photoshop.

View Demo

Step 2: Scale

Another basic transform option that you can get with any graphic editor is Scale. Scaling is pretty simple, it increases or reduces the width and height of any element, or group of elements.

With CSS3 you can scale elements pretty much the same as in Photoshop, the syntaxes to scale along both axis being:

transform: scale(<value>); //Both width and height
transform: scalex(<value>) //Width
transform: scaley(<value>) //Height

Let’s see a bunch of examples:

/*Scale 50%*/
.scale50{
	-moz-transform:scale(.50);
	-webkit-transform:scale(.50);
}
/*Scale 120%*/
.scale120{
	-moz-transform:scale(1.2);
	-webkit-transform:scale(1.2);
}
/*Scale from 25% to 75% on :hover*/
.scale25-75{
	-moz-transform:scale(.25);
	-webkit-transform:scale(.25);
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
}
	.scale25-75:hover{
		-moz-transform:scale(.75);
		-webkit-transform:scale(.75);
	}
/*Scale 50% width*/
.scale50x{
	-moz-transform:scalex(.50);
	-webkit-transform:scalex(.50);
}
/*Scale 50% height*/
.scale50y{
	-moz-transform:scaley(.50);
	-webkit-transform:scaley(.50);
}

Now see it running:

View Demo

Step 3: Skew

Moving on to another very basic yet powerful transform: Skew. By changing an angle you can displace the parallel lines of a shape creating a perspective illusion which can be used as a 3D effect.

With CSS3 it’s possible to skew a shape just as in Photoshop, let’s see some examples:

/*Skew*/
/*Skew 30 degrees X on hover*/
.skew30x{
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
}
	.skew30x:hover{
		-moz-transform: skewx(30deg);
		-webkit-transform: skewx(30deg);
	}
/*Skew 15 degrees X*/
.skew15x{
	-moz-transform: skewx(15deg);
    -webkit-transform: skewx(15deg);
}
/*Skew -15 degrees X*/
.skew-15x{
	-moz-transform: skewx(-15deg);
    -webkit-transform: skewx(-15deg);
}
/*Skew 25 degrees Y*/
.skew25y{
	-moz-transform: skewy(25deg);
    -webkit-transform: skewy(25deg);
}
/*Skew -25 degrees Y*/
.skew-25y{
	-moz-transform: skewy(-25deg);
    -webkit-transform: skewy(-25deg);
}

View Demo

Step 4: Combine Transforms

Let’s try to combine transform styles to create some radical effects:

/*Combining Transforms*/
.transformed{
	-moz-transform:		rotate(10deg)
						scale(1.3)
						skewy(15deg)
						skewx(-30deg);
	-webkit-transform:	rotate(10deg)
						scale(1.3)
						skewy(15deg)
						skewx(-30deg;
}

View Demo

Step 5: Some Fun Examples

Below are some fun examples of what can be achieved using transforms. We’ll begin with my Photoshop renderings of the designs, then we’ll see if we can get the same result with CSS3 (you can download the PSD source in the tutorial files).

Firstly, set up some general CSS:

/* Reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, img{
    margin: 0;
    padding: 0;
	border:0px;
}
header, section, footer, aside, nav, article, figure {
    display: block;
}
/* End of Reset */
/*Set up some basic styles*/
body{
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
}
html{
	height:100%; /* To add a full page body CSS3 gradient you need to set this height to 100% */
}
.wrapper{ margin:0px auto; width:960px; padding:60px 0px 60px 0px;}
.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}
/* Body background */
body{
	height:100%;/* To add a full page body CSS3 gradient you need to set this height to 100% */
	background-repeat:no-repeat;
	background-image:-moz-linear-gradient(top, #0096f5, #00416a);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096f5), to(#00416a), color-stop(1,#FFF));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#0096f5, endColorstr=#00416a);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#0096f5, endColorstr=#00416a)";
	/*To avoid have a blank stripe at the bottom, there are a couple of fixes */
	/*background-attachment:fixed;*/ /*Works ok except on IE*/
	background-color:#00416a; /*The background will look nice when scroll, adding the bottom color all across the page*/
}
/* a basic style for a column */
.row{
	width:50%;
	float:left;
	margin-bottom:10px;
	height:340px;
	border-bottom:1px dotted #FFF;
}

Translucent Fan and Vertical Title

In the first effect, we have a fan of three divs and a heading tag. The trick here is to use the z-index property to properly arrange the content.

The HTML Structure:

<section class="row">
	<h2 class="title">Lorem Ipsum</h2>
		<div class="box">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
		</div>
	<div class="box box2"></div>
	<div class="box box3"></div>
</section>

Now style the divs and the heading:

/*Main Box*/
.box{
	width:190px;
	height:190px;
	background-color:rgba(255,255,255,.85);
	/*Rounded corners*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*Get rid of Bleed*/
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
	/*Set the position*/
	position:relative;
	left:0px;
	top:0px;
	/*Show it on top*/
	z-index:3;
}
/*A basic Paragraph style*/
.box p{
	color:#02263D;
	padding:10px;
	font-size:11px;
	line-height:140%;
	/*Show it on top as well*/
	z-index:3;
}
/*First translucent layer*/
.box2{
	/*Set the background color with RGBA*/
	background-color:rgba(255,255,255,.5);
	/*Set the position*/
	left:20px;
	top:-165px;
	/*Show it one level behind the main box*/
	z-index:2;
	/*Rotate Trabsform*/
	-moz-transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
}
/*Second translucent layer*/
.box3{
	/*Set the background color with RGBA*/
	background-color:rgba(255,255,255,.25);
	/*Set the position*/
	left:30px;
	top:-325px;
	/*Show it two levels behind the main box*/
	z-index:1;
	/*Rotate Trabsform*/
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
}
/*Vertical Title*/
.title{
	/*Text Styles*/
	color:#FFF;
	text-transform:uppercase;
	font-size:14px;
	/*Set the position*/
	position:relative;
	left:-255px;
	top:-45px;
	/*Rotate Transform*/
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}

Rotate on Hover

You can independently rotate all the elements inside an html element. This, combined with transition effects, can be a great way to add focus to some areas of your designs. Take for instance the following HTML mockup:

<section class="row">
	<div class="box4">
	<img src="images/pic.jpg" alt="Picture"></div>
</section>

Now rotate the image and the container box at different angles (clockwise and counter clockwise) within the :hover pseudo class.

/*Box Style*/
.box4{
	/*Width and padding*/
	width:220px;
	height:220px;
	padding:10px;
	/*Translucent background color with RGBA*/
	background-color:rgba(255,255,255,.85);
	/*Rounded Corners*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	/*Get rid of Bleed*/
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
	/*Enable transition effects*/
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
/*Set the styles of the image inside the section*/
.box4 img{
	/*A nice border*/
	border:1px solid #FFF;
	/*A box shadow to add a bit of deep sensation*/
	box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
	/*Enable transition effects*/
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
/*Rotate on hover*/
.box4:hover{
	/*Rotate -15deg CCW*/
	-moz-transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
}

Complex Skew to Create a Reflected Box Layout

Let’s move the things a step further. With Skew Transforms you can a sort of 3D depth to your sections. Let’s try to build an alternative way of showing an item from a media gallery, using a title, description, and an HTML5 video tag!

Let’s start with the HTML mockup:

<section class="row2">
	<video class="front" src="http://edusol.info/sites/edusol.info/files/CINT_Nik_H264_720.ogv" controls="" poster="./poster.jpg" tabindex="0"></video>
    <div class="side"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p></div>
    <div class="top"><h2>Sample Video</h2></div>
    <div class="frontreflection"></div>
    <div class="sidereflection"></div>
</section>

Since a <video> tag can be handled as any other HTML element, we can apply almost all the styles we know to it.

First, set up the background of the container section. The following code generates a glossy gradient creating some kind of "horizon" to mock up the next elements.

/*Set the container*/
.row2{
	/*Adjust the size and position*/
	width:100%;
	height:650px;
	float:left;
	padding-top:10px;
	/*You know that you can scale the whole section*/
	-moz-transform:scale(.90);
	-webkit-transform:scale(.90);
	/*Apply a gradient background*/
	background: -moz-linear-gradient(top, rgba(0,105,175,0) 0%, rgba(0,105,175,0.85) 35%, rgba(0,80,130,0.95) 35%, rgba(0,80,130,0) 100%);
	background:	-webkit-gradient(linear, left top, left bottom, from(rgba(0,105,175,0)), color-stop(0.35, rgba(0,105,175,0.85)), color-stop(0.35, 	rgba(0,80,130,0.95)), to(rgba(0,80,130,0)));
}

Set the common styles for text.

/*Common Styles (Nothing really difficult here)*/
.top h2{
	font-size:20px;
	color:#FFF;
	text-transform:uppercase;
	padding:25px;
}
.side p{
	font-size:20px;
	color:#FFF;
	font-weight:normal;
	padding:10px;
}

Now style the front container, <video> tags can handle almost all CSS styles we know, and behave as any other HTML block level element.

/*Let's set the front container*/
.front{
	/*Set the position*/
	position:relative;
	left:220px;
	top:132px;
	/*Dimensions*/
	width:355px;
	height:200px;
	background-color:#FFF;
	/*Skew Y Transform*/
	-moz-transform: skewy(20deg);
    -webkit-transform: skewy(20deg);
}

Now the side section (can be the video brief, or an introductory text.

/*Set the Side Container*/
.side{
	/*Position (Next to the front container)*/
	position:relative;
	left:575px;
	top:-45px;
	width:130px;
	height:200px;
	/*Set a gradient background*/
	background-image: -moz-linear-gradient(left, #000000, #313131);
	background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#000000), to(#313131), color-stop(1,#313131));
	/*Skew it*/
	-moz-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
	/*Just in case the text is bigger than the container*/
	overflow:hidden;
}

Let’s style the title.

/*The title*/
.top{
	/*Set the Position*/
	position:relative;
	left:220px;
	top:-360px;
	width:355px;
	height:75px;
	/*A gradient background*/
	background-image: -moz-linear-gradient(left, #000000, #313131);
	background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#000000), to(#313131), color-stop(1,#313131));
	/*Skew it to match the Front section*/
	-moz-transform: skewy(20deg);
    -webkit-transform: skewy(20deg);
}

Now that we have the main divs in their proper place, we will add a couple of "floor reflections" (divs with an RGBA gradient background) just to give this section a more glossy effect.

.frontreflection{
	/*Set the position just below the Front section*/
	position:relative;
	top:-147px;
	left:220px;
	width:355px;
	height:200px;
	/*Skew it to match the perspective angle*/
	-moz-transform: skewy(20deg);
    -webkit-transform: skewy(20deg);
	/*Set the gradient background (with the bottom stop color transparent)*/
	background: -moz-linear-gradient(top, rgba(182,182,182,1) 0%, rgba(182,182,182,0) 100%);
	background:	-webkit-gradient(linear, left top, left bottom, from(rgba(182,182,182,1)), to(rgba(182,182,182,0)));
	/*Set the opacity as you want*/
	opacity:0.25;
}
.sidereflection{
	/*Set the position just below the Side section*/
	position:relative;
	left:575px;
	top:-320px;
	width:130px;
	height:200px;
	/*Match the skew angle*/
	-moz-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
	/*Set the background gradient*/
	background: -moz-linear-gradient(top, rgba(73,73,73,1) 0%, rgba(73,73,73,0) 100%);
	background:	-webkit-gradient(linear, left top, left bottom, from(rgba(10,10,10,1)), to(rgba(10,10,10,0)));
	/*Set the opacity*/
	opacity:0.35;
}

Check out this set of examples running in a browser:

View Demo

Conclusion

Have a go yourself and see what can you create with CSS3 transform options. Thanks for reading!