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)
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° < 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°, y:45°)< 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;">
</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°,z20°< 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 PropertyCSS Transforms
CSS3 2D Transforms
