2D transform fundamentals
Video: 2D transform fundamentalsWhereas Transitions are designed to interpolate the changes in CSS properties over a specified time, Transforms actually manipulate HTML objects, such as divs and images. The W3C working group for CSS 2D Transforms says in their specification that CSS 2D Transforms allows elements rendered by CSS to be transformed in two-dimensional space. Granted, not the most informative definition, but you really don't need it once you can see what transforms can do.
- Next steps
Viewers: in countries Watching now:
With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.
- Understanding transition basics
- Working with 2D and 3D transforms
- Animating color changes
- Fading objects
- Changing the size of page elements and fonts
- Transitioning multiple properties at the same time
- Understanding keyframes and animations
- Working in the z-index
- Crafting transitions in Dreamweaver
2D transform fundamentals
Whereas Transitions are designed to interpolate the changes in CSS properties over a specified time, Transforms actually manipulate HTML objects, such as divs and images. The W3C working group for CSS 2D Transforms says in their specification that CSS 2D Transforms allows elements rendered by CSS to be transformed in two-dimensional space. Granted, not the most informative definition, but you really don't need it once you can see what transforms can do.
All transforms follow the same basic syntax, the keyword "transform" followed by a colon and then the function name with any parameters in parentheses. There are four basic transform functions, the first, Translate, moves objects around the screen. transform: translate(10px, 10px) moves the target element right 10 pixels and down 10 pixels. You can also use negative values to move elements up and left.
There are also functions to apply if you just want to move the object along one axis translateX and translateY. Let's take a look at how transform translate works. Here I have a ball set up with the translateY function, using the Active Trigger. So when I move my mouse over it, nothing happens, but when I put the mouse down and click on it, it translates down 300 pixels along the Y axis. Now no transitions are being applied here, but you can do that as you'll see later, this is just the raw transform.
I'll take my mouse off, and it translates back up. Not only can you move objects, but you can resize them with transform: scale. Like translate, the scale function takes two arguments, X and Y, where 1 is the same size as the original, .5 is half the size, and 2 is twice the scale. There're versions for resizing along a single axis as well, scaleX and scaleY. Here's a quick look at transform scale in action applied to a series of form buttons, and I'm using the Hover State as a trigger.
First I'll scale up in both directions, now I'll scale up just in the X direction, and now Y. Objects can also be rotated to any degree from 0 to 360 and beyond. Let me show you how that looks. Here I have a baseball set up to rotate 60 degrees on hover, and out, in, and out. There's one last transform function that can be applied, skew.
Page elements can be skewed horizontally along the X axis or vertically on the Y. Skew values are given in degrees. Here is what skewing a textbox looks like both in the X and Y directions, with quotes from the highly-skewed Mark Twain. There is a skewX and skewY. Those are all 2D transform functions. But there is another related property that can be used in conjunction with any of the transform functions, transform-origin.
By default, all transform functions assume a center origin. You can modify that by specifying a different set of coordinates, either in percentages, pixels, or keywords, like left and bottom. To demonstrate transform origin, let's take our rotate example, the baseball, and switch the origin point for the transformation to the bottom left corner. Now when I hover over the baseball, instead of staying in place and rotating, it rotates down and to the right.
And now I'll my mouse away, and it rotates back up. You'll need to use vendor prefixes for all of the 2D transforms as a quick look as that caniuse site indicates. However, I still recommend using the generic CSS transform property to future-proof your code. Finally, I'm sure you noticed that all these transforms were applied immediately like any standard hover state change. The good news is that transforms can be combined with transition, so you can manipulate your page elements with a much smoother final appearance.
Here's one final demo, to drop a ball and give it a little bounce. Now that you've gotten the taste of what's possible with 2D transforms, you're ready to explore the 3D realm.
There are currently no FAQs about CSS: Transitions and Transforms.