CSS3 Transforms

Intro

CSS3 has been around for a few years now. Prior to CSS3 and HTML5 we all lived in the dark ages. I'm pretty sure dinosaurs roamed the earth, Republicans were Democrats, and humans had just learned to fashion clubs. No electricity even! But now with CSS3 we can do a whole lot more on our not-as-primitive-as-before web pages, making them look ever-so-pretty. CSS3 does quite a bit more than just transforms, but this is a blog not a novel so we'll stick with just this one topic for today.

What They Be?

What are CSS transforms? Well they're CSS actions (a single property within a style-sheet definition) that you can use on your tags. I mostly like to use them on images, but they're valid on divs, spans, whatever. It's a nifty way to get cool 2D and 3D actions performed without having to write complicated modification routines using JavaScript.

Example Set #1: 2D Transforms

What all 2D CSS transforms can you do? Rotate, Scale, Skew, Translate. What Are they? Here's a quick example that shows 4 transforms on groovy-looking images.

control

rotate 90°

Scale (x: 1.5, y: 0.5)

Skew (x:10°, y:45°)

Translate (x:30px,y:10px)

 

It might be kinda tough to tell exactly what this did so I'll break it down. The control image has no transformation. It's just a standard HTML image. The rotation transform rotates the image as though it were the hands of a clock. Scale scales your image by the amount given in the parameters, where 1.0 is the same as 100%. Skew stretches/smushes (good technical term huh) your image. I like to think of it as though somebody were to pull on opposite corners of the element, with the corners and direction determined by x/y and the angle. The translate transformation moves your image by the amount specified.

Here's the code used to generate the above effects:

<style type="text/css">
.rotate {
transform: rotate(90deg);
}

.scale {
transform: scale(1.5, 0.5);
}

.skew {
transform: skew(10deg, 45deg);
}

.translate {
transform: translate(30px, 10px);
}
</style>

<div style="float: left;">
control< br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="float: left;">
rotate 90&deg; < br />
<img border="0" class="rotate" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="float: left;">
Scale (x: 1.5, y: 0.5)< br />
<img border="0" class="scale" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="float: left;">
Skew (x:10&deg;, y:45&deg;)< br />
<img border="0" class="skew" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="float: left;">
Translate (x:30px,y:10px)< br />
<img border="0" class="translate" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="clear: both;">
&nbsp;
</div>

Cool huh? 2D transforms are fun to play with. But guess what? CSS3 does 3D transforms too!

Example Set #2: 3D Transforms

So yeah, like I said, it's time for some 3D transforms. You can do many of the same 2D transforms as 3D transforms, such as rotation, scaling, and translating. Let's look at a slew of samples again to get a feel for what we can do:

control

rotate x30°,z20°

scale x 1.3

translate z 50px

Let's take a closer look at these homeys. Control is still the control image, no transforms. the 2nd image rotates on the x-axis 30 degrees and the z axis 20 degrees. Image numero tres scales the image on the x-axis by a factor of 1.3, and the final image translates the image on the x-plane by 50px (brings the image forward 50px thus putting it on top of the 3rd image).

Here's the code used in them thar samples:

<style type="text/css">
.rotatey {
transform: rotateY(30deg);
}
.rotatez {
transform: rotateZ(20deg);
}
.scalex { 
transform: scaleX(1.3);
}
.translatez { 
transform: translateZ(50px);
}
</style>

<div style="float: left;">
control< br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="float: left;">
rotate x30&deg;,z20&deg;< br />
<img border="0" class="rotatey rotatez" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="float: left;">
scale x 1.3< br />
<img border="0" class="scalex" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="float: left;">
translate z 50px< br />
<img border="0" class="translatez" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitU3xEzE_sCgKe4bMn6K_zmIvbXUqGZPt5ALApt-G1xQAFHaTf40dvrrSQiRhfil3OIfSEOnwqkUv_2yb4Om0i4R79__sBVLMRTg33e_A82_lMmkxAtqeuykU1ExNAH7y-5F5jyjQx8wOR/s1600/monster-icon.png" height="100" width="100" />
</div>
<div style="clear: both;">
</div>

Pretty cool stuff! You can make lots of nifty effects with just some CSS, HTML and time.

What's Next?

Take a look at the resources below, play around with transforms yourself. There's more I didn't cover though it's all pretty similar. Get yerself a beverage of your choice and have at it for an hour or two, see what shakes out.

Resources

CSS3 Transform Property
CSS Transforms
CSS3 2D Transforms