Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Of all the cool CSS3 demos currently online, none of them get as many oohs and ahs as the 3D transform demos. I mean check this out. It's pretty cool, right? All right, how about this one? How about that? Isn't that cool? Check that out. I can just sit here and do this all day. That is so cool. All right, I'll show where to find these demos in just a moment.
Now without a doubt, 3D transforms allow us to do some pretty cool stuff. Although 3D transforms have their own Level 3 module specification, they share so much of the 2D transform specification that once you've got a handle on writing those transforms, making the transition to 3D transforms is pretty easy. Now that's the good news. The bad news is that the specification is still very young, support is sparse, and changes to both the specification and the implementations are ongoing.
Still it's certainly worth exploring. So let's talk a little about 3D transforms and how they work. Just like 2D transforms, 3D transforms use the transform-property to pass transform functions. At first glance, it looks like there are quite a bit more transform functions in the 3D transforms than 2D transforms, but if we look closer, we can see that for the most part, it's exactly the same transforms with the Z-axis property added to the X and Y properties.
Now, what's the Z-axis? Imagine that your monitor is a flat plane. If you were to draw a straight line, coming out perpendicular to the monitor that would be the Z-axis. It allows us to simulate depth and stacking order for our 3D transforms. Now, that leads me to a transform function that is specific to 3D transforms. Perspective. Now, perspective essentially establishes a viewing distance between the viewer and the transform object.
The higher the value, the further away the user is and as such the subtler the transform becomes. Perspective can be set as a property or as a transform function. Now as a transform function, it applies to the transform on the element itself, while as a property it applies to the positioned or transformed children of the element. More than anything else, applying perspective as a property allows you to set the same perspective for all child objects that are transformed.
So it's not uncommon to see it placed on the body tag so that your perspective remains consistent and you don't have to keep setting it. You can also set a perspective-origin property. A good way to visualize this is to think about a vanishing point or establishing the angle of the plane that the element is rendered on. Now this can be set as a keyword or as percentages. Another 3D transform property that you want to be familiar with is the transform-style property. Now this property takes one of two values.
The default flat value and preserve-3d. So what does this do? Imagine that you have you have two elements, a parent and a child, and that you've applied 3D transforms to both of them. If the transform-style is set to flat, the child's transform values are ignored and it's mapped to the same transform as its parent. Now if it's set to preserve-3d, both transforms are applied independently of each other, allowing for a more pronounced effect, greater stacking depths, or all sorts of mayhem.
Now all this sounds really cool and leads to the natural question, can I use this now? Well, browser support is as of this recording a little weak. As you can see only WebKit browsers really support 3D transforms and there are differences in the Safari and Chrome implementations. I also feel that I should point out that 3D transforms are hardware accelerated in Safari to increase their performance. They're fairly processor-intensive and work is continuing in other browsers to add support.
All right, so what does that mean for you now? Well, unless you're designing for a controlled WebKit environment, like the iPad or iPhone, I'd put these capabilities squarely in the experimental category. Although it's easy enough to detect for 3D transform support, creating fallback content is not the easiest thing in the world to do. I encourage you to experiment with 3D transforms, especially by combining them with transitions, and stay current on changes to the specification and support levels, so when the time is right you can add 3D transforms to your own projects and applications.
Now, how about those demos I promised? Snow Stack has that really cool 3D flicker interface that I was showing you and that 3D cube demo, that was created by Paul Hayes. You can find out more about both of them by visiting these links. I also recommend checking out the Safari blog page on 3D transforms. There is a ton of information and some really cool demos there as well. If you decide to give them a try, just remember their experimental nature and have fun with them.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.