Transitioning the images with CSS
Video: Transitioning the images with CSSThe final piece of the puzzle is the CSS Transitions and Transform declarations that will give our gallery its pizzazz. I have open now the transitions.css file from the Chapter 5/05_04_css folder, and first, since we are working with 3D transforms, we need to establish the perspective in the outer wrapper, which in this case is the section tag with the class of container. So I will start right after my last declaration margin here and put in the webkit-perspective, and let's set that to 1000.
- 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
Transitioning the images with CSS
The final piece of the puzzle is the CSS Transitions and Transform declarations that will give our gallery its pizzazz. I have open now the transitions.css file from the Chapter 5/05_04_css folder, and first, since we are working with 3D transforms, we need to establish the perspective in the outer wrapper, which in this case is the section tag with the class of container. So I will start right after my last declaration margin here and put in the webkit-perspective, and let's set that to 1000.
All right, we can copy this, and I am going to paste this in four times now and change our vendor prefixes. First, let's change the second entry from -webkit to -moz for our Mozilla. The third one we will change to -ms for Microsoft, and then we will change the fourth one to -o for Opera, and we will get rid of the last one altogether. Now we are ready to pass the 3D features onto the children of the container, and for that we will need to set the transform style property to preserve 3D for its containing element, which is the div with an ID of carousel.
So I am going to put that down at the bottom here, and create a new rule. So .ready space #carousel, and we will enter in the second selector. Again, .ready#carousel figure. All right, now we are going to transition the transform property, and of course, we'll use our vendor prefixes, and we have to make sure that the vendor prefix is the same for both the transition and the transform property. So let's start off with -webkit-transition and then -webkit-transform, and let's make this 1 second duration, and we will use the default for the timing functions, which is ease, by leaving that off.
Okay I am ready to copy this line and then again paste it four times, and let's change the vendor prefixes, being sure to change both the transition and the transform. All right, that's done. Now this next bit is a design choice, and it's a bit subtle, but I prefer to set up a zeroed out box shadow property that can grow with the transition on the images. Let me show you what I mean. We will create a new rule for the images within the figures that are within carousel, so let's enter in our box shadow property with the WebKit vendor prefix.
And instead of setting up an offset and a spread, we will just use zeros. 0 space, 0 space, 0 space and then the color which I am going to keep consistent, but you won't be able to see it, because all the other values are at 0. Okay, we can copy that line now and then again paste it four times and change your vendor prefixes. Next let's add in our transition for the image and rather than target one property, because we have multiple things going on now, let's use the keyword all, and we will set the duration for the transition to one second.
Time to copy that line, and then paste it in, four times. Change our vendor prefixes. Okay, we are getting close to the end. It's time to create the CSS rule for the image hover state that will scale up the image to twice its size and apply the box shadow. We will create the rule so that it only works on the front most image, that is the one with the class of showFig. The selector is #carousel space figure.showFig, im, image, or img:hover.
And let's start with the box-shadow first, and we will set the offsets to 3 pixels in both directions, and we will have its spread out five pixels and the color will be black. All right, we can copy that code line to our pasting and our vendor prefix substitution. Now we are ready to enter in our transform scale property. So -webkit-transform: scale, parenthesis, and we are going double the size of this, so enter in a 2 and a semicolon at the end. And we copy this and paste again four times.
I assure you, I'm just as sick of changing these things as you are, no doubt. Won't it be glorious when we get to the point where this will no longer be necessary. I'm looking forward to it, I'm sure you are too. All right, finally, let's set up a couple rules that we will need for the older browsers. Ones that do not support CSS 3D transforms. Here we will incorporate the Modernizr class, no CSS transforms 3D to hide what we don't want to show and only display that which we do.
So the rule for here starts with a selector .no- and then the property, that is not supported by those browsers. Which in this case is csstransforms3d and then #carousel figure. All right, let's do that one more time and apply it to just the toggle switch, so we can hide that toggle control. And I mentioned this would be a hide, so we will use the display property and set it to none. All right, so the last thing we want to do is when we are ready to show the figure, we will change the display:none to display block, and we will only apply that for a figure with a class of showFig.
So let's enter in our no csstransforms3d value again, I just copied it so I paste it again one more time, #carousel figure.showFig. So open and close our curly braces and enter in display:block. All right, let's save our file. Now there is one more thing I need to do before we preview this in the browser, and that's to link the CSS file, transitions.css, to our source code. So let's go up to open that file, to spotlight.htm in the Chapter 5/05_04 folder, and we will put this right after the link to main.css, so another link tag with an href=_css, and there is our helpful CSS folder pop up, put a folding/, and you can see one of two files there, we want transitions.css.
See how the block shadow fades in and then fades out again, and let's go Previous this time just to check it out this way. Ah! Looks excellent! I really like this one here, so let's take a closer look at that, it's very nice. Now let's try out our Toggle axis. Very sweet and interesting! Now we go Next, and there's another image scaled up for you to examine. Well, it's working fine in Safari, a very modern browser. Let's take a look in a slightly older version of Firefox, and when I loaded into Firefox, I will scroll down to the middle, and there we see the basic image.
If I hover over it, it does scale up, because this version of Firefox does support that sort of scaling and transitions, and as you can see, it's just as smooth as in Safari. And now when I click Next, I can cycle through the images very easily, and it all works perfectly well. You will notice that also the Toggle axis button is now hidden in the upper right. All right, so excellent work! Let's head back to the Safari for one last look at our 3D carousel. That's up and running, complete with hover scaling, rotating axes, and graceful degradation.
Great work everybody!
There are currently no FAQs about CSS: Transitions and Transforms.