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.
Ready to tackle a full-fledged transition and transform project? In this chapter we'll build a very cool photo carousel that combines 2D and 3D effects for an enhanced user experience, and it also gracefully degrades for older browsers. Let's take a look at the final product, so you have an overview of what we'll be tackling. So I have opened here in my browser spotlight.htm file from the Chapter 5/ 05_01 Final folder, and here in the middle of the page I have an intriguing series of images. The middle image is in a standard rectangular shape and a couple of images to the left and right slightly angled.
So if I go and hover over the middle image, it scales up nicely to about twice its original size, and it's framed by a nice little drop shadow, and when I move my mouse away, the image returns to its original size and the drop shadow disappears. Now if I hover over any of the other images, nothing like that happens, so it's only on the center image. I can also see something else in the background between the three images, but I can't really quite make out what it is. Well, perhaps if I click the Next button here on the lower right.
All right, my circle or carousel if you will, of the images is rotated, now putting the one image previously on the right, front and center. And if I hover over that image now, it scales up, so I can see more detail and grows a drop shadow. Okay, by clicking Next again, I can see that there are a series of images. They're actually ten in all, and now, pretty obviously, if I click Previous, the carousel will reverse itself, all pretty nifty. Now there is one other button on the top-right, labeled Toggle Axis that's caught my eye. Let's see what that does.
Beauty, as my Canadian friends would say, the images rotate and fly into their new position to create a vertical carousel, and all my interactive controls, including the hover, work as before. And if I toggle the axis again, we go back to horizontal. I adapted the code for this project from a demo created by David DeSandro. He's got a real testbed going on here where you can interactively increase or decrease the number of images, as well as toggle the backface visibility on and off. Let me show you what I mean.
So, right now we have nine images here, and if I scale it up to--oh, let's say 16, 16 separate panels now appear. And like the carousel we're going to build, there are Next and Previous buttons, as well as a button for toggling the carousel axis. One control that I left out of our variation was the toggle backface visibility, because it didn't seem to make as much sense in context, but let me show you what it does. So if I click on toggle backface visibility, I get an arc if you will of the carousel without seeing the background and everything still works, and my carousel works as well.
Now I can toggle the backface visibility back on if we want and play with it over and over again. Now there are a few other differences between the version we're going to build and the demo version. I added the hover scale up feature, and I also made it backwards compatible with older browsers. For those browsers, viewers will see a single image straight on, and when they click Next, the next image will appear just like a regular slideshow. They won't of course, see the 3D carousel or the control that toggles the axis. I hope you're as excited about this innovative presentation tool as I am, and ready to get started building it. Let's get going!
There are currently no FAQs about CSS: Transitions and Transforms.
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.