Join James Williamson for an in-depth discussion in this video Using 2D transforms, part of CSS: Advanced Typographic Techniques.
One of the core recent additions to CSS has been the addition of transforms.…Transforms come in two flavors.…Two-dimensions and three-dimension, and allow you to do things like…scaling, skewing, rotating, and even adding perspective to your page elements.…Now, we're going to explore 2D transformations…as we finish up our mast head.…So, here I have the speed.htm file open from 03_05.…Again I'm focusing…on the hot rod span selector, and I'm just going to scroll down…and start adding these just below the shadows that we, we added earlier.…
Now.…Now transforms, again, they're one of those things that…for cross browser compliance, we need to use vendor prefixes.…So I'm going to show you kind of how this works.…We're going to do -webkit-transform.…And then after that, we're going to do MS for Microsoft, or…Internet Explorer, and then after that we'll just do the, the natural transform.…Now, you can see that, based on the Code Editor I'm using, I…can see, sort of, all these options that I have available to me.…Now, some of these are three-dimensional transforms and some are 2D.…
- Controlling font rendering with CSS
- Using web fonts
- Adjusting kerning
- Adding dimension to text
- Working with gradients and drop shadows
- Using 2D and 3D transforms
- Applying perspective
- Aligning split text
- Creating and triggering transitions
- Enabling animations
- Extending CSS with Lettering.js and Modernizr
Skill Level Intermediate
1. Getting Started
2. Using Lettering.js
3. Creating Dimensional Text
4. Creating Refracted Text
5. Animating Text
6. Using Modernizr
Additional resources2m 11s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.