Transform Your World

With so many CSS Properties out there it is handy to know some important ones. The Transform Property allows you to mess with how a 2D or 3D object is, ya’know, transformed. “Well, duh, Kaitlyn I know that. But what does that mean?” I can just hear all of you practically screaming that in your heads right now. So! When you transform you have the option of messing with the translation, skew, rotation, matrix, and scale of your object.

So now that you know what the Transform Property is, let’s get into the different ways you are able to use it.

Matrix

When we refer to a matrix we aren’t referring to The Matrix. What we are referring to, however, is the space that we are transforming the object in. Technically speaking, a matrix is an environment or space in which something develops. So when we transform the matrix in CSS we are essentially changing the space of that object. The coding for a matrix transformation is:

transform: matrix( a, b, c , d, tx, ty);

Basically what this is telling us is that we transform a matrix by ( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()). So a matrix is like taking half of the other individual powers of Transform Property and putting them into one line of code. Now that we know this we can all take the title of The One from Neo since we can control the matrix too, now.

Skew

The exact definition if a skew is “an oblique angle; a slant”, which describes what occurs when you skew transform pretty well. What skewing does is distorting each point in an element by a certain angle both horizontally and vertically. The coordinates for the points are modified by a values that is proportionate to the specified angle and the distance of the origin. In simple, normal human terms: the farther a point is from the origin point, the greater the modifying value. To create a skew you use can use two formats:

transform: skew( ax);

transform: skew( ax, ay);

The values that are required are the angle of distortion along a horizon line (ax) and the angle of distortion along a vertical line (ay). If you just use the first option and don’t put a AY value, that’s cool. The default for AY is 0 and therefore you’ll only get a horizontal skew.

Translation

When working with translation it is important to note that you aren’t translating something in the traditional sense. You can’t use this property to change the language from like Italian to Russian or something like that. While that would be cool, it’s likely outside of CSS’s scope of abilities. When we translate an object, what we are actually doing is simple moving it. It’s like if you have a magnet on your fridge, and you just slid it around to a new position. You’re translating that magnet. To do this in CSS you use the programming:

transform: translate( x, y);

transform: translateX( x);

transform: translateY( y);

transform: translate3D( x, y, z);

transform: translateZ( z);

Now I know, I know. “You can translate in 3D??” Yes. You can translate objects in a 3 dimensional setting. Isn’t that neat? But really, we’ll get into that later on. Probably. Here’s a small example showing translation.

Scale

You make things bigger and smaller. That’s it. That’s what scaling is my friends. Now using it in your CSS is very, very similar to the translate code we have above. You have:

transform: scale( x, y);

transform: scale3D( x, y, z);

transform: scaleX( x);

transform: scaleY( y);

transform: scaleZ( z);

Take note that in this example, when you only change one factor of the object it stretches and warps it.

Rotation

You remember when I said that we’d get to the 3D stuff later? Wellllll, we’re not really getting into 3D stuff. But it seems like we are. In the example below I utilize another handy property known as Transition so that I can smoothly rotate the example element when it is hovered over. Rotation is really basic, same as the two above. You have spinning it around it’s X-axis (the horizontal one), it’s Y-axis (the vertical one), or it’s Z-axis (the center one). And you do this by using:

transform: rotate( angle);

transform: rotate3D( x, y, z, angle);

transform: rotateX( x);

transform: rotateY( y);

transform: rotateZ( z);

Real Life Usage Right Here

Now you might be wondering just how we can use these properties in the real world. The Greenwood Campbell website is a great example. They might not have super fancy uses for it, but it is quite effective and make their site more interesting. The programmer simply applied a transform property to the cursor, so that when it hovers over objects the scale of it changes.

 

Try it Yourself

Now that I have done all that I can for you, the only thing left is for you to go out into the world and use the Transformation property yourself! No don’t be too scared. If you’re just shaking in your boots at the complexity of this property or “Kaitlyn I STILL don’t understand what a matrix is”. No worries! I gotchu covered. Behold. This super helpful interactive 2D Matrix demonstrator! It allows you to hover over a point and it will tell you which blocks apply to it and what their values are. It also lets you click and drag values to see what that might do to the object. Now keep in mind this is a 2D matrix, so the values in the bottom row are fixed and you can’t explore the overwhelming world of 3D transformations.

Good luck, have fun, and I’ll see you all when I’m back from vacation,

Kaitlyn