CSS Animation with Transition and Transform

  1. Course Requirements This course has been especially designed for anyone willing to make their first steps with CSS animation and transition. For the best learning experience you should have a working knowledge of HTML and CSS, so you should understand what are the HTML tags and how to use them to create a layout. You should know as well how to style a page by using CSS cascading style sheet in order to make your page look pretty. If you have answered yes to the two that is perfect, this class is perfectly suited for you, and for this class no Javascript is required, so what you know of HTML and CSS is sufficient enough in order to follow along with me. What you'll need for the class first is a code editor, so I'll be using Sublime Text, which is good for both Mac and PC, so you can follow the link if you'd like to download for yourself a copy, but any other code editor will work just fine, so as long as you're comfortable working you could use, for example, Text Mate, which is for Mac users or Notepad++ if you're using a PC. Any one will work just fine. I would recommend secondly that you use a modern browser like Chrome, which I'll be using for the demonstrations in this class or you could use Firefox, which is fine as well. Also, you're going to need to download the demo files in order to complete the exercise together, so demo files are available for download for each module, so to summarize, in order to get yourself setup what you need is a code editor, so I'll be using Sublime Text for the demonstrations, and I will recommend that you use a modern browser like Chrome, which I'll be using as well in this class, and finally, you're going to need the demo files in order to complete the exercise and follow along with me, and the demo files are available for download in each module.
  2. CSS Transition Properties Let's begin by defining what is CSS Transition. W3C group, which describes all of the CSS3 specifications, defines it as CSS Transitions, allows property changes in CSS Values to occur smoothly over a specified duration. So let's see with one example. We can imagine that we have a square like 13, 100x100 pixels for example, and it has a background color with the value red, so that is the Initial State. Then for the right we have the Final State and we're using the value blue for the background color. CSS Transition will allow it to animate the change from the first value red to the new value blue during a given duration of 1 second, and for the Trigger State we're going to use hover, so when we hover over the chief element the background color red will transition to blue over 1 second. Going through an Intermediate State, purple at half of a second, so this is how animation works with CSS transition. We have an initial state, we're using red in that example at 0 seconds, going through Intermediate State at half of a second, so that is purple, which is a mix of red and blue, then we have the Final State at 1 second when the animation is complete. Then we're finished with the value blue. Let's have a look at a more detailed breakdown of how a transition would work if it was going really slow, but in reality that would would take just 1 second. We start with the Initial State with the value red, it goes through different shades of red, then purple in the middle at half of a second, and then we finish with the value blue at 1 second when the animation is complete. This is how animation works with CSS Transition by allowing a gradual and smooth transition from an initial state to a final state during a given duration like 1 second in that example, so let's see how this works with one example in the browser. Let's make a quick demonstration. You're going to be able to see that when we mouse over this square the background color will switch automatically from red to blue with no transition because we're not using any transitions for now, so it switches from red to blue. Let's make the same demonstration by using CSS Transitions this time. You're going to see that this is smoothly transitioning from red to blue over 1 second. We're going to do the same demonstrations by using 10 seconds for the duration and you're going to be able to see the gradual and smooth transitions from the initial state to the final state going through purple over 10 seconds. Let's do that a second time. You're going to see that this is smoothly transitioning gradually from the initial state, which is red, to the final state, which is blue during a 10 second duration, so the purpose of CSS transition is instead of having property changes taking effect immediately, CSS transitions will allow the value of a CSS property to change smoothly over a given duration. We're going to see how this works in the next video in details and see how we can actually apply transitions to CSS properties to create nice animation effects. See you in the next video.
  3. CSS Transition: How It Works? After a brief presentation of CSS Transition I'm sure that now you want to understand how it actually works and in order to create nice animation effects with CSS we're going to use the CSS Transitions properties. Starting by transition-property, which is used to specify the name or names of the CSS properties to which transitions should be applied, and only properties listed as a value of the transition property will be affected by the animation. Then you have transition-duration to specify the durations during which transitions should occur. You can specify a single duration that will apply to all properties during the transition or multiple values to allow each property to transition over a different period of time. We're going to see later in that module how we can achieve multiple transition effects. You also have the property transition-delay that allows to delay the start of the animation. It also takes a value in seconds just like transition-duration. Then you have transition-timing-function that includes five different options in order to control the speed of the curve. We're going to have a chance to use transition-timing-functions during this course in order to add some variations to the speed of the animation. Now let's create a transition effect by using the CSS transition properties. Let's assume that we have an element with the class box with a height and a width of 100 pixels. We're also applying a background color with the value red, so that is the Initial State. Then on hover we want the background color of the same element to change to blue, and that's going to be the Final State. In order to allow the transitions between the two, red and blue, we're going to use the transitioned property in the initial state and we're going to identify the property to which we want to apply the transition effect, which is background color. Next, we want to specify the duration of the transition, so we're going to add another declaration to the Initial State, and that's going to be a transition-duration and we're going to use the value 1 second, which is the default value. S stands for seconds. This is how you create a transition effect with the CSS transition properties, so there is more to that of course, and we're going to be doing a few more examples together. Before that I'd like to speak about browser support because when you create nice animation effects you want to make sure that they work properly across browsers, so we're going to be talking about the latest browser support and vendor prefixes in the next video lessons. Then we're going to have more fun with a couple of demonstrations, and that's going to be at the end of this module, see you then.
  4. Browser Support and Vendor Prefixes You have just seen how CSS transition works and now we want to take a moment to talk about browser support and the vendor prefixes because while it's great to create nice animation effects with CSS, you also want to be able to impress a large audience by targeting all major browsers, and the reason we use vendor prefixes is because sometimes CSS3 features are not fully implemented, meaning that they are not supported by all browsers, so we use the vendor prefixes to allow cross-browser compatibility and to support CSS through features that are still at an experimental stage. That's why developers and designers always include a series of vendor prefixes declarations and you're going to see a lot of them during this class, so let's see what they are, and how we can identify them. First, you have the prefix webkit to target the webkit browsers that includes Chrome and Safari. Then you have moz for Mozilla Firefox, an o for Opera, finally, ms for Microsoft Internet Explorer, and the standard property will always come last for future proof, so let's use the same demonstration that we used earlier to create our transition effect, so in the initial state we're going to add another transition property, and we're going to use the perfect swap kit to target the webkit browsers. We're going to do the same to target Mozilla Firefox, then o for Opera, and ms for Internet Explorer and we're going to place the standard property last for future proof, meaning that this is going to the last property which is going to be processed by the browser, following the rule of cascading style sheet, so once a CSS3 feature becomes fully implemented this is the last property, which is going to be processed by the browser overriding the previous ones, and so we're going to do the same for the property transitions duration. We're going to add as many lines of code as there are our prefixes. As a take away for this video lesson I'd like to talk about one online resource that I find super useful for web developers and designers, and this is caniuse.com, which provides with the latest browser support updates, so I'm going to search for transition (Typing) and we can see that at the time of the recording, so CSS3 Transitions are fully implemented and supported including IE starting at version 10, so we're still going to be using the vendor prefixes for our demonstrations to get you in the habit of the best practices, so it's time now to do some demonstrations and we're going to be using the CSS Transitions properties and also the vendor prefixes.
  5. Demo: Blue to Green Let's begin with the first CSS Transitions demonstrations of this class. We're going to be creating animation effects by animating color changes and also creating multiple transition effects and for that we're going to be using the CSS Transition Properties and the Vendor Prefixes to allow cross-browser compatibility. Let's see now in the browser we have the two squares that we're going to be using for our demonstrations and first we're going to be looking at the one at the top, which is blue to green, so as you can guess, what we're going to do is animating the change between the two values, blue to green, and for now you're going to see that when we mouse over the background color will automatically switch from blue to green, so going from the initial state to the final state with no transition in between. Then the second example, square to circle. What we're going to do is animate the change of the shape from square to circle, so you're going to see as well that when you mouse over, so the square will automatically change from a square shape to a circle with no transition in between, and we also have a different background color, which is purple, so what we're going to do is creating a multiple transition effect. Let's have a look behind the scenes, so we're going to go to the source code where we have two different sections, and that corresponds to the demonstrations we're going to be doing together. First, we're going to be looking at the lines 15-23, and I use this section with the id color. Inside we have a div with the class square, and if we look on the right, so you have the style.css with the first selector, which is a square, and we're targeting this element with the width and the height of 250 pixels to create a square and we're also applying a background color with the value blue. If we go back to the browser we're going to see that we have the blue square, so at the top, but also at the bottom. For the blue to green example we're going to change the background color to green, so we see that on hover we want the background color to be green. When we mouse over it it changes automatically from blue to green and in order to create the transition effect we're going to use the CSS transition properties in order to allow the transitions from the initial state to the final state. At line 10 in the initial state you're going to add the transition property and for the value we're going to identify the property for which we want to animate the change, on which we want to apply the transition effect, and that is background-color because we want to animate the change from blue to green. Then remember as well that every transition always occurs during a specified duration, so we're going to add another transitions property, and that's going to be transition-duration and the default value is 1 second, but we're going to use 5 seconds for this demonstration. We're going to save the document then, go back to the browser, and refresh the page and you're going to be able to see this time that when you mouse over the square, so the background color will smoothly transition from blue to green during 5 seconds, so then we finish with the value green when the animation is complete after 5 seconds. We're going to make the same demonstration with 15 seconds this time in order to see the smooth and gradual change from the initial state to the final state, so you see that when we mouse over this is smoothly, gradually transitioning from blue to green during 15 seconds, and then the animation is complete once we reach the final state with the value green, so back to the Code Editor we're going to go back to 5 seconds for the duration, and this time we're going to talk about vendor prefixes to allow cross-browser compatibility, so we're going to duplicate this line of code, and this time we're going to use the prefix webkit in order to target the webkit browsers, that includes Chrome and Safari. If you remember, you want to make sure that your animations can work across browsers. We're going to add another line of code to target Mozilla Firefox, then we're going to use another line to target o for Opera, and finally, ms for Internet Explorer. Also, through the standard property comes last for future proofs, so meaning that once a CSS3 feature becomes fully supported, fully implemented, this is the last property which is going to be processed last by the browser overriding the previous one. Of course, we're going to do the same for the transition-durations property. We're going to add as many lines of code as there are prefixes to allow cross-browser compatibility. This is how this all this should look after adding all the prefixes, so that should work the same way when you go in the browser, the animation will be pretty similar. We're going to go to Firefox as well, just to test the animation, so right now I'm using the Firefox browser and we see that when we mouse over, so we have the same smooth transition from blue to green. You can apply a transition effect on plenty of other CSS parties. For example, you can animate the change of an element from square to circle, and we're going to see that with that with our second example in the next video lesson.
  6. Demo: Square to Circle We're back in the Chrome browser for our second example, square to circle. You're going to see that when we mouse over, so the shape will automatically transition from square to circle, and we also have a different background color, so we're going to actually apply multiple transition effects, so back in the source code, so we're going to be looking at the style.css, and we're going to target the element, the section with the id circle. On hover you see that we have a border-radius with a value of 50% to create a circle, and we're using also a different value for the background-color property. We're going to do the same just like the first demonstration, we're going to add in the initial states, the transitions property, and for the value we're going to identify the CSS property on which we want to apply the transition effect, and that's going to be border-radius. Then we're going to specify a duration, so we're going to add the property transition-duration, and we're going to use 5 seconds for this demonstration as well. That's going to allow to animate the change from square to circle during 5 seconds, so we can save the document, and go back to the browser. We're going to refresh the page and you're going to be able to see this time the gradual change from square to circle during 5 seconds, so this only applies to the border-radius. You can see that when you mouse over, so the background color automatically switches from blue to purple, so there was no transition applied to the background color, but this is what we're going to do next. We're going to allow so the transitions to apply to the background color as well, so you can add as many names as you want to the transitions property separated by a comma, so we're going to add a comma, then we're going to specify also the property background-color in order to allow the transition, and we're going to also apply the duration of 5 seconds for both transition effects. Let's go back to the browser. We're going to refresh the page and you're going to be able to see this time the transition from square to circle, but also from blue to purple during 5 seconds. Just like the transitions property, you can apply multiple values to the property transition-duration, so we're going to add multiple values in order to target individually each transition effect. We're going to target first the border-radius with 5 seconds, then we're going to use another value to target the transition of the background-color effects, and so after 5 seconds we're going to add a comma, then we're going to use 2 seconds for the transition effect of the background color change, so the animation of the background color will be quicker during 2 seconds, while the animation of the border-radius will take 5 seconds, so both animation will start at the same time, and will be complete at different times, so back in the browser we're going to check that out. We're going to mouse over and you see that the background color has changed very quickly, while the animation from square to circle has finished 3 seconds later. We're going to reverse the two values, so it allows for the border-radius to change very quickly during 2 seconds, then the background-color change will take 5 seconds to be complete. We're going to try this, you're going to see that we're going to have a quick change from square to circle while the background=color will smoothly transitioning during 5 seconds from blue to purple. Let's not forget about vendor prefixes, so we're going to add them for each of the property, then I want to talk about transitions delay, that allow us to start an animation with a delay and I'll explain that in the next video lesson.
  7. Demo: the Transition-delay Property Transitions-delay. As the name indicates, it allows to start the animation after a delay, so we're going to use this one on the same demonstration, square to circle, and we're going to add it in the initial state, so right after the standard property transitions duration, and it also texts a value in seconds, so we're going to use 3 seconds for the value of the transition-delay property, and that's going to also the animations to start after a 3 second delay. Back in the browser we're going to refresh the page and mouse over the square and as expected, so once we mouse over it's only after a 3 second delay that the animation will start, and all care as expected, so during the duration that we have specified, so just like the other property, we can specify multiple values, separated by a common in order to target the CSS property differently, individually. For example, we can have a 0 second delay, so no delay at all for the background color change, transition effects. In that case, the animation will start to as expected for the background-color change, so once we mouse over, as soon as we mouse over the square, so the background-color will start to change from blue to purple, and the border-radius, so from square to circle will start only after a 3 second delay. I'm going to change this value from 0 to 2 seconds, so the animation will start after a 2 second delay, and it's going to take 5 seconds to be complete as it specified for the transitions duration, then it's going to be followed by the border-radius change, which is going to take two seconds to be complete for the animation, so we're going to go back to the browser, and you're going to see that when we mouse over the square, so the animation of the background color will start after a two seconds delay, taking 5 seconds, then it's going to be followed by the animation from square to circle, which is going to take 2 seconds to be complete. Back in the Code Editor, so you're probably noticing a change. I have added the vendor prefixes, so this is more lines of code. This is starting to be a lot and a little bit cluttered as well, so there is a way to keep the code short and clean, and this is by using the shorthand, and I'm going to show you this in the next video lesson.
  8. Using the Shorthand In this video I'm going to show you how to use the shorthand in order to keep your code clean, short and more maintainable. We're going to get rid of a few lines of code, not just yet, so we're doing to keep them as a reference and at the top, so for the first lines of code where you can read transition-property, we're going to remove the suffix, which is property, and we're just going to keep the segment transition, and this property, which is transitions can take multiple values in order to target different elements of the transition that you want to create. Right after border-radius we're going to specify the duration, so that's another value, which is going to be in seconds, 2 seconds, and so the animation will occur during a 2 second period duration, and we can also add another value, which is optional to specify the transition-delay, so in that case that's going to be 5 seconds. We're going to do the same for the background-color, so we're going to allow the animations to occur during three seconds, and to start after a 2 second delay, so we're not going to need all the lines of code that we have below, because now we have all the information that we need summarized on one line, so this is how we use the shorthand. We're going to duplicate these values and add them for each of the vendor prefixes to keep things consistent, so that's not going to make any difference for the performance of the animation, that's going to be working pretty much the same actually, the only difference will be of the code, which is going to be shorter, and more maintainable by using the shorthand, so that's always something that you can keep in mind. You can use the property transition that takes multiple values, so first you would add the name with the property that you want to target with the transition, followed by the duration that you'd specify in seconds, and optional, you can also specify _____, so that's also a value in seconds, and you can also add a fourth value and this one is another property, which is transistion-timing-function and this wedding is used to control the speed of the animation, and we'll have a chance to discuss that later during the course in another module. In this module we have covered the CSS transition basics to learn how to animate property changes, so changes in values, to create nice animation effects. This is how CSS Transitions brings life to your webpage, and there are plenty of examples of properties that you can animate. You can also animate in a 2-dimensional space, and that is made possible with a 2D Transform. We're going to see that, of course, in the next module.
  9. CSS Transition and 2D Transform Introduction Welcome to CSS Transition and 2D Transform. In this module you will get introduced to CSS Transform, which as the name indicates, allows to transform and manipulate HTML elements. The W3C group, which is putting together the recommendations and specifications of CSS Transition defines it as CSS Transform allows elements styled with CSS to be transformed in a two-dimensional space. Let's look at one example together. Right now we are on the w3schools website. On the first square I'm going to mouse over and you're going to see that this is going to flip horizontally 2D Rotate and I'm going to mouse over again to have it rotated by 180 degrees, so on the right we have another example with 3D Transform that I will introduce to you later in the next module. In that demonstration we're using CSS Transform combined with CSS Transitions in order to create the animation, so you're already familiar with CSS Transition. In the module 1 you have learned that CSS Transition is what animate the change in a CSS party like color changes for example, and her as well we're using CSS Transitions to allow the animation of the values, the changes in values, of the CSS Transform property, so in order to change or transform the HTML elements we're going to use the transform-property. With transform-property you can change the shape of elements, you can resize them by scaling it up and down, and you can also change the position of elements by making them move around the screen, so in this module I will teach you the transform functions to learn to animate the transformation of HTML elements in two-dimensional space, so just like the examples and demonstrations we have seen in the first module, you're going to see that 2D Transition is pretty straightforward to code. I will start this module by presenting to you the transform methods, so that is four of them. We're going to see what they are in detail, then I'm going to show you some examples of animated HTML elements transformations by using the same transform methods, and finally, we're going to put all of it in practice with two tutorials. That's going to be a fun way to see it in action and see what you can achieve with the CSS Transform combined with CSS Transition and the usual, so what you're going to need for this class is a Code Editor, a browser, and also the demo files that you're going to find available for download in this module in order to complete the exercise with me, so if you're all set we can then get started, and I'm going to start with the presentation of the transform methods and that's going to be in the next lesson.
  10. Introduction to 2D Transform Now let me introduce you to the 2D Transform Methods so you have four of them. First you have Skew, then Scale to resize elements, then Rotate, and also Translate, in order to move elements around the screen, so we're going to start with Skew that allows to skew elements on the X and Y-axis, so this method takes two parameters. The first one is used to target the X- axis, so in that example that allows to skew the elements by 20 degrees on the X-axis, then the second parameter, the second argument, will allow to skew the same element by 10 degrees on the Y-axis. You also have the options to target only the X or the Y-axis by using the methods skewX or skewY, so in that example we're using the method SkewX with the argument 20 degrees, which is going to allow to skew this element by 20 degrees on the X-axis, and you can also use negative value, which is going to allow to skew the same element by 20 degrees on the opposite direction. In the browser we're going to see that we have a few examples with nice pictures of animals, so the first example we're using the method skewX with 20 degrees, and we're going to see that when we mouse over this element will be skewed by 20 degrees on the X-axis, so below we have the same example, a different example. This time we're using a negative value and then we're going to have this element skewed on the opposite directions by 20 degrees as well. Then you have the method scale that allows to increase or decrease the size of an element, so this method also takes two parameters. The first argument will target the width and the second one the height, so let's use the example operative 100x100 pixels, so that is the original size, and we want to increase this div by 2, so we're going to use the arguments 2, 2 and 2 to target the width and the height, and that's going to allow to increase the same elements by 2, so 1, the number 1 being the original size, using the number 2 will allow it to create an element 200 pixels by 200 pixels this time, and to do the opposite in order to decrease the size of this element we're going to use the value 0.5 and that's going to allow this time to decrease the size of this element by 2, by half, then we're going to end up with a div 50 pixels by 50 pixels. Let's go now in the browser in order to make a quick demonstration. Here we have two squares, so on the left we're using the method scale with the argument 0.5 for the width and the height, and you're going to see that when we mouse over we're going to have a smaller square, which is reduced by half. On the right we're using the same method scale and 2 and 2 in order to increase the original size by 2. You're going to see that when we mouse over we're going to end up with a much bigger square. You can choose to resize just the width or the height of an element by using the methods ScaleX or ScaleY, so we're going to go back to the browser to see another demonstration, so on the left we're using the method ScaleX in order to target the width with one argument only this time in order to represent by how much we want to increase the original width of an element. For this demo we're using CSS Transitions in order to animate the change from the initial to the final state. Here we can see that this is slowly transitioning from the original size to an increased size by 1.5 and then on the right we're using the method ScaleY in order to increase the original height by 1.5 vertically and this is how you can then resize elements on a webpage. Then you have the method Rotate that allows to rotate an element clockwise or counter-clockwise according to a given degree. This method takes one parameter. Just like the methods queue, it takes one argument in degrees to indicate by how much we want to rotate the element clockwise. In that example we want to rotate by 90 degrees clockwise. We can also use a negative value in order to rotate counter-clockwise this time. In that example we want to rotate the element counter-clockwise by 90 degrees. Let me show you a few examples in the browser. For the first example we want to rotate the element by 45 degrees clockwise. Here you go, so when we mouse over you see that this is rotating clockwise by 45 degrees, and for the second example we want to have a complete rotation by 360 degrees, and I'm going to use CSS Transitions there for you to see the change, the slow and smooth transition of the square by 360 degrees clockwise. Here you go. When I mouse over this is rotating by 360 degrees and I'm using CSS Transitions combined with CSS Transform. Let's complete this intro to 2D transform with Translate, so the method Translate allows to move an element from its current position on the X and Y axis or both, so it takes two parameters, so the first parameters X-axis allows to move and element on the X-axis horizontally and then the second parameter allows to move an element on the Y-axis, so vertically, and decide to move an element from its current position on the x-axis only horizontally by using the method TranslateX or on the Y-axis vertically with the method TranslateY, so let's see one example with TranslateX. We're using the argument 50 pixels, which is going to allow to move an element from its current position 50 pixels to the right. By using a negative value you can then move the same element to the left and let's see now where that TranslateY that's going to allow it to move an element on the Y-axis, so vertically, and here we can then move this element 50 pixels to the bottom and reverse using a negative value will allow it to move the same element 50 pixels to the top. We're going to use the transform effects again, in demonstrations and also in the final projects to create nice animation effects. Before that I want to talk about the transfer party, explain how you can write the syntax. I want to talk also about process support of course, and I'm going to explain all of this in the next lesson.
  11. The Transform-property In this video I will how you how to use the Transform property. We're going to talk about the syntax and also how to use it with transitions in order to animate an element, which is being changed. We're going to talk also about browser support of course, so let's have a look at a code example. Let's imagine that we have an element with the class box with a height and a width of 100 pixels and it has a background-color of red, so that is the initial state. Then on hover we want the same element to have a transformation. That's going to be any transformation that we want, so on the left we have the initial state and on the right we have the final state on hover. Let's see how we can actually write the transform property, how we can use it, so what is the syntax? First we're going to have the transform property followed by a colon. Then as a value we're going to write the function that we want to use, so that's going to be any functions, any methods, and in parentheses we're going to have one or two parameters, for example, we could use the method skew that can take one or two parameters. Then on hover we're going to use the property transform, and then the method skew, skewX in order to skew the elements on the x-axis by 20 degrees as indicated as an argument. Then we're going to identify so the property that we want to animate, so on however we want these elements to be changed, so we're going to use the property transition and as a value we're going to identify this property for which we want to animate the change, which is transform. Then we're going to specify a duration, which is going to be 2 seconds, and let's not forget about browser supports. We're going to make sure that we use the vendor prefixes for the property transform to make sure that the transformation of the elements can work properly on all major browsers and we're going to make sure also that the standard property comes last for future proof and we're going to do the same in the initial state with transition, just like we have proceeded in the first module. In order to read about the latest browser support updates for the property transform we can go to the website caniuse.com. Remember that we had made a reference to it in the module 1, so we're going to verify how this property transform is supported by the browsers. We're going to type transform and we're going to be able to see that transform is well supported, including by IE starting at version 9, and below we can see also information about CSS 3D Transform, but we're going to talk about this later during this course. For now we're going to be doing a few more demonstrations and we're going to start with the method skew and that's going to be in the next video lesson.
  12. The skew() method As promised, we're going to see together a few examples of 2D transition and transform and we're going to start with the method skew, which is the first square that we have on this page with the background color purple. For the working files you're going to find inside the demo files another folder named demo. This one includes an index.html and the style.css. Now in the Code Editor, so I have opened the working files, the corresponding files for these demonstrations, and that's the index.html on the left. We have a few sections and the one that we're going to be looking at corresponds to the skew method at line 17 and that is the section with the id skew. Inside you have a div with a class square and on the right you can see that we are targeting this element with the CSS selector square, with the width and the height of 150 pixels, and we're also applying a background color with the value blue, below you see that we have a few other CSS selector, a couple of them, that corresponds to this demonstration that we're going to be doing for the skew method, and while targeting this element square, so inside the section with the id skew, with a different background color, which is actually purple, so let's go back in the browser to see what is the corresponding element that we're targeting, so this is the first one with the background color purple, objects we are using a different background color for this first example, so the one at the top, so we're going to go back to the Code Editor, you're going to see that below we have another CSS selector where we are using the pseudo class hover, so this means that we want a different presentation, a different rendition on hover, and for that we're going to be using one of these transform methods. We're going to start with the property transform property, then we're going to use the function skew as expected, and that's going to be skewX in order to allow to skew this element on the X-axis by a given angle and in parentheses we're going to be using one value, so that's going to be the argument in degrees, and we're going to use 20 degrees. That's going to allow then to skew this element by 20 degrees on the X-axis. Now you are going to save your document and go back to the browser to see the result, so you're going to make sure to refresh your page, and when you're going to mouse over the first element, so the first square with the background color purple, the element is skewed by 20 degrees on the X-Axis, so you could help the same element skewed still on the x-axis, but on the opposite direction, and for that we just need to us a negative value, so in bracket we're going to use -20 degrees and we're going to go back and we're going to be able to see that this time the element, the same element is skewed, still on the x-axis, by 20 degrees, but on the opposite direction. What would be nice to see the gradual change from the initial to the final state, so being able to see the animation from the square shape to the shape of the element which is skewed, and for that we're going to b just like in the module 1 using the transition property, so in the initial state we're going to add transition then we're going to identify the property for which we want to animate the change, and that's going to be transform. Now we're going to also specify a duration, so we want these animations to occur during 5 seconds. Then back in the browser you're going to be able to see the smooth transition from the initial state, which is a square, to the final state with this element, which is skewed by 20 degrees. We can even have the animation stakes lower by using 10 seconds for the duration, then we're going to be able to see a gradual and smooth slow change from the initial states. When you mouse over it's going to take 10 seconds and when the animation is complete after 10 seconds, so we can see this element which is skewed or you can have it fast, so we're going to go back to the Code Editor and we're going to use 1 second for the duration, then you're going to be able to see the change happening fast, but still with a transition, so when you mouse over you can see _____ the change, so the gradual change transition from a shape to a skewed element. We're going to go back to the duration 5 seconds for this demonstration and we must not forget about, of course, the vendor prefixes in order to allow cross browser compatibility. What we're going to do next is add as many lines of code as we have vendor prefixes to make sure that your animation, so the animation of the transformation of this element can work across browsers, and we're going to do the same for the property transition in the initial state just like we did in the module1, and we're going to finish with that before we move onto the method scale and that's going to be in the next video lesson, see you then.
  13. The scale() method In this demo we're going to use the method scale in order to increase or decrease the size of an element. In this particular example we're going to actually increase the size of an element, so if you want to look at the section with the id scale at line 33, inside we have the same div with the class square to create the square for the demonstration, and inside we have another div, which is empty for now, but if you want to check out actually on the right on the style.css you're going to see that we have a few CSS properties to target this div element, so first we have a background-color, so that's going to be black, and then we have a width and height of 75 pixels to create a square, which is actually smaller than the parent element. This one is actually positioned in the center of the parent element, so I think it's better to show than explain, so we're going to go check out in the browser to see how this looks. We're going to look at the second example that corresponds to the scale method, so we have first the square with the blue background, and in the middle at the center you have sort of the black square, which is smaller, 75 pixels by 75 pixels. What we want is to scale this one up until it covers to the blue background, so we want to use the method scale, so we're going to go back to the Code Editor, and then on hover we're going to use the property transform, we're going to use the method scale that takes two parameters, and for the argument we're going to use the number two in order to allow so the original size of the element that we're targeting to be increased by two, twice as much. We're going to save the document, then go back to the browser to see the result and the result that you can expect is that the black square will actually cover the blue background because 75 pixels being half of 150 pixels, this one will cover up completely the blue background, so we're going to refresh, and you're going to mouse over and, as expected, we see that the black is covering completely the blue background. That would be nice as well to see the change inside for these elements to be animated, so for that again, we're going to use the property transition in the initial state, and we're going to identify the property as transform and we're going to use 5 seconds as well for the duration, so we're going to save and go back to the browser refresh, and this time you're going to be able to see, so this back square is scaling up gradually until it covers so the blue background. Here you go, during 5 seconds, and when the animation is complete after 5 seconds you can only see black, no longer blue. I'd like to add another element, so for the initial state of this demo for the animation, so on hover I'm going to use the property background-color because I'd like actually a different background color every time I mouse over this div, so the black square, and we're going to be able to see that there's going to be a different background color every time we mouse over and because we want to animate the change as well for the background color, which is going to be transitioning from black to blue. We're going to add also the name of this property, which is background-color to the transition party, and we're going to allow this one to animate during a duration of 2 seconds and we're going to use a delay of 1 second, so that's going to start to transition from black to blue only after a 1 second delay, so after making this addition we're going to save the document. Then we're going to check out in the browser how the animation works this time, so we're going to refresh the page, and you're going to be able to see this time that when you mouse over, so the black square will start to scale up, and then it's going to be smoothly transitioning from black to blue, and it's almost like this is fading in, blending with the background color of the current element, so the biggest square, and back in the Code Editor you're going to notice that I have added a few lines of code that corresponds to the vendor prefixes as usual to allow corresponds or compatibility. So now we have a few more exciting demonstrations ahead of us about 2D Transform and Transition and we're ready to move onto rotate, so see you in the next video.
  14. The rotate() method Let's begin with the demonstration with rotate, so we're going to find the section with the id rotate on the index.html, so that is line 50. Inside you're going to find as well a div with a class square to display the square and on the right you're going to find the corresponding CSS properties, so we have a section that corresponds to the section rotate, id rotate, and we are targeting this one with the background-color and the color tomato, so that's the color that I like pretty much, so after I introduce to target this one with this color, so let's check out in the browser, so we can see the section, the rotate, and the color tomato for the background, so ultimately what we want is to rotate this element by using the method rotate, so we're going to do that. We're going to go to the Code Editor, so we want to apply the transformation on hover, so we're going to go find the corresponding CSS selector, and as the previous demonstrations, we're going to use the property transform (Typing). Then we're going to use the method rotate. This one takes one parameter in degrees, so we're going to use 360 degrees in order to create a complete rotation, and in order to be able to see the change right away we're going to add right now, so the property transition in the initial state, and of course, we're going to identify transform, the transform party as the property for which you want to animate the change, and that's going to be 5 seconds for the duration, so let's go back in the browser, refresh, and when we mouse over you're going to be able to see that this element is doing a complete rotation by 360 degrees, and we can even have it slower, so have a slower, gradual rotation of this element when we mouse over, like 15 seconds, and you're going to see that this is going to take slower 15 seconds in order to rotate for the animations to be complete. In order to have so the same element rotates counter-clockwise, so starting to move to the opposite direction, we're going to use a negative value, so that's going to be -360 degrees, so we're going to save, then refresh again, and then we're going to mouse over again, and this time it's going to rotate, but counter-clockwise, and we're going to complete the demonstrations by adding the lines corresponding to the vendor prefixes in the source code. For the demonstrations, there is more that you can do, so you can combine multiple transform methods, and apply multiple transition effects and we're going to achieve that together, so let's find out more in the next video lesson.
  15. The translate() method Now we're going to complete the last demonstrations for the 2D transform method and that's going to be with the method translate, so that corresponds to the section with the id translate on the index.html, so that is line 65, so on the right we have the CSS properties in order to target the square that we have inside, so the div with the class square, and we have an orange background-color for this square, so this is the last square that we have on this page, and what we want is to move this one across the screen from left to right by 900 pixels by using the method translate, so we're going to go back to the Code Editor and we want to have this effect on hover, so we're going to use, as usual, so the property transform, and we're going to use the method translate. We want to move this element, so on hover from left to right horizontally, so we're going to use the method translateX, and we're going to use 900 pixels for the argument and also we want to animate the change from the current positions to the final position, which is going to be 900 pixels further right, and we're going to target the transform property with the transition and we're going to allow these animations to occur during 5 seconds, so now we're going to check out and try this animation in the browser. You're going to see that when you mouse over the element, so the last one, that this is going to move from left to right, so traveling all 900 pixels, and it's got to go back when you mouse out and the animation will take 5 seconds to complete. We can even have it slower, so we can use the duration of 10 seconds, so in order to see it moving even slower from left to right, so when your mouse over it's going to take 10 seconds to move from the current positions left to far right, so 900 pixels further right. I'd like to add to this demonstration, so what I'd like is to see the background color changing while the element is moving across the screen, so we're going to go back to the source code, and in the final state we're going to add another property, so that's going to be background-color, which is arranged for the initial state, and we want this one to be green for the final estate and we want to allow the transition for the change in value for this property background-color, so we're going to specify the name of background-color as well for the transition property, so we're going to add this one, so right after transform after the duration, then that's going to be background or background-color, you can use either one, and we're going to specify a duration of 3 seconds and we're going to allow this one to start, so this animation for the background-color to start after a 2 second delay. You can save and let's see how this works out. We're going to save the document, then we're going to mouse over, it's going to start to move, and then half way through the background color will start to change, smoothly transitioning from orange to green. When it's coming back, so the background-color will go back to the initial state, which is orange. I'm going to continue to add to this demonstration, so what I'd like to do is to combine the transform method, so it's not just limited to one, as you're going to see. For now we're using the method translate and I'd like to use as well the method rotate. Ultimately what I'd like to see is this element rotating while this is moving across the screen, so right beside translate, so we're going to add a space, and we're going to use the method rotate and we want this element to rotate by 360 degrees, doing a complete rotation while this is moving across the screen, so let's try that. We're going to save the document, then go back to the browser, so we're going to refresh, and we're going to mouse over, and so the element will start moving, but also rotating across the screen, and half way through, so the background color will also smoothly transitioning from orange to green. It's pretty nice, so let's try that a second time. I'm going to mouse over the elements, which is going to start to move, but also to rotate, and that's going to take 5 seconds to be completed to go from the left to right, and also the background color will change. It's going to take 3 seconds to change from orange to green after a 2 second delay actually. You can certainly combine the transform methods in order to create more complex animation effects. It's not just limited to one, so we're going to have a chance to see a few more examples, more elaborated by doing a few tutorials together, but also with the final project.
  16. Using Transition-timing-function In this video I'm going to explain to you what is transition-timing-functions and how to use it, so transition-timing-functions allow us to control the speed of the animation, and that is pretty nice to know. We're going to use this one several times throughout this course, so it comes with 5% values, linear, ease, ease-in, ease-out, ease-in-out. We're going to see what they are in details and what is the use for each of them? First, you have the timing function ease, which is the default value where the animation will start and finish slow, so if you're not specifying any timing function this is the value ease, which is going to apply, allowing your animations to start and to finish slow. Then you have the timing function linear that applies the same speed from start to finish. With ease-in the animation will start slow and finish fast. You can see the visual on the left that this is slightly curvy at the beginning, then the line finishes straight, meaning that the animation will be much faster towards the end, so that is the opposite with ease-out, so you can see the visual that we have, so the line, which is curvy towards the end, and it starts straight, so that means that it's going to start fast, and it's going to end slow. Then you have a combination of the two with ease-in-out, so it's going to allow the animations to start and to finish slow. You can see on the visual that we have the ends that are slightly curvy and then the line is straight in the middle, allowing the animation to speed up when it's in the middle, then it's going to finish slow again. Now you are probably wondering what is the difference between the two, so ease, which is the default value, and ease-in-out. For the ease you can see that the line is slightly more curvy, which is allowing the animations to be smoother. For ease-in-out you can allow the animations to start slow, then to speed up in the middle much faster, then to finish slow again. Let's see a few demonstrations together with timing functions. If you want to try this demonstration yourself you can use the file timingfunctions.html that you're going to find in the folder demos, so we're going to start with the first one with the default value, which is ease, we're just going to allow to start the animation slow, then to finish slow, and you're going to see that this is going to be slightly speeding up half way through. This is starting and finishing slow and this is slightly faster in the middle. Then you have linear, which is using the same speed from start to finish and with ease-in we're going to start slow, and then we're going to finish fast. With ease-out that's going to be the opposite, so we've got to start fast and then we're going to finish slow. With the last one that's going to be a combination of the two purpose one, ease-in-out. We're going to start slow then we're going to of faster in the middle, and we're going to finish slow, and we're going to go back to the last demonstration that we have done for the 2D Transform with the method translate, and we're going to add the transitions timing function to this animation, to allow the animations to start fast and to finish slow, so we're going to use the value ease-out. We're going to go back to the browser, and we're going to refresh the page and we're going to start the animations by mousing over. You're going to see that this is going to start fast, and then it's going to finish slower, so we're going to do the opposite. We're going to go back to the source code and we're going to use ease-in to allow the animations to start slow this time and to finish fast. We're going to refresh, we're going to mouse over, you're going to see that this is going to start slow when we mouse over, then the animation will finish much faster, here you go, so this was achieved by using ease-in.
  17. Tutorial: The Rotating Gears I have named this tutorial the retaining gears and that's because I want to duplicate the mechanism of gears rotating. You're going to see that when we mouse over the gears they're going to start to rotate, to animate, and for these tutorials we're going to use everything that you've learned so far, so that's going to be CSS transition, CSS transform, and we're going to include also another ingredient that you have just seen and that is timing function. You know within is in an ease out to control the speed of the animation, so I'm going to show you all the steps, we're going to go to the Code Editor, but before we head to the Code Editor I'm going to show a preview of the result that we're expecting, so I'm going to mouse over the gears, and you're going to see that as soon as I mouse over the smaller gear will start to rotate followed by the bigger one, which is going to rotate clockwise. You can notice actually that they are both rotating in the opposite direction, so that's pretty straightforward to achieve, and I'm going to show you right now. The corresponding folder for this tutorial is named rotatingGears that you're going to find inside your demo files. Inside rotatingGears you're going to find an index.html, a style.css, but also a folder with images that includes the images that we're going to be using for this tutorial. On your index.html you have an id with the id rotate, so that's going to be main element, and this one includes two child elements, so these are the images that we're going to be using for this animation, and on the right under the style.css we have a few CSS selectors to target these elements. We're going to be looking at the bottom for now, so we have a few CSS extras that are empty for now, and you see that we are targeting individually these images, so every time we hover over the element with the id rotate, which is the parent element, so what we want is to target this element with a transformation, so we're going to use the property transform. We're going to target the small gear first, so that's going to be line 22. We're going to use the property transform and for the method that's going to be rotate that takes one parameter in degree, so we're going to use -360 degrees in order to have the small gear rotating counter-clockwise, and of course, we want to see the animation from the initial to the final state, so we're going to use the property transition that's going to be in the initial state, which is the selector above, and we're going to target the property transform for the animation. For the duration we want these animations to occur during 10 seconds, so we're going to check out in the browser to see how this work out, and you're going to see that as soon as we mouse over, so the smaller gear will start to rotate counter-clockwise by 360 degrees, and the animation will occur during 10 seconds, so let's continue. This time we want to target the big one, so we're going to add also the property transform to target this element with the class big_gear, and we're going to use the same method that's going to be rotate, except that we're going to use a positive value because we want this element to rotate clockwise, and we want to animate the change for this one as well, so we're going to use the property transition in the initial state, so that's going to be pretty similar except for a few differences. We're going to specify a duration, which is going to be slightly longer, so that's going to last during 12 seconds, and we're going to add also a transitions delay because we want these animations to start after a 2 second delay, so we're going to see how this works out in the browser, you're going to save your documents, and you're going to see that as soon as we mouse over, so the smaller gear will start to rotate counter-clockwise, followed by the big gear, which is going to rotate after a 2 second delay, clockwise by 360 degrees. I'd like to complete the demonstrations by allowing the animations to start slow and to finish faster, so for that we can use timing functions that comes with 5% values, and we're going to use ease-in, which is going to allow the animations to start slow and to finish faster, so in the shorthand you can add this one at the end, that's going to be ease-in, we're going to add this one as well for the small_gear, we're going to save, and let's check out how this works in the browser. You're going to be able to see that when we mouse over it's going to start pretty slow, then it's going to finish much faster, and that can be achieved with a timing function with the value ease-in. Let's play the animation a second time, so the small gear will start to animate to rotate as soon as we mouse over followed by the big gear, which is going to finish faster than it started after 12 seconds. I'm going to complete the code with the vendor prefixes, so we can all agree that this is pretty nice to know timing functions that allow us to control the speed of the animation. You can also create custom timing function and this is made possible with cubic-bezier and I'm going to show you that in the next video. We're going to complete together the next tutorial that's going to be the bike rider.
  18. Tutorial: The Bike Rider The objective in this drill is to have this bike rider moving across the scene until it disappears and for this tutorial we're going to use CSS Transition, CSS Transform, and also custom timing function, so it's almost like timing function, but this time we're going to use a function that we can customize. This is cubic-bezier in order to add some variation to the speed of the animation. Let's begin. We're going to go to the Code Editor. You're going to find the corresponding folder named bikeRider in your demo files. This one includes an index.html and a style.css. There is also the folder images that includes the image of the bike rider that we want to display, so you're going to see how this is pretty bare-bone on the index.html. We're using the image tag with the class rider and on the right on the style.css we are targeting this element with a few CSS properties, so we're using position absolutes, so it is displayed 15 pixels from the left and 10 pixels from the bottom. On hover we want to target the same element with transform, so we want to transform this element, and we want this one to move across the screen horizontally, so we're going to use the method translateX, and we're going to use a high value, like 1700 pixels, and I want to allow this element to move across the screen until it disappears and in the initial state we want to add the property transition, so that is the factor rider. In order to allow the allow the transition from the initial to the final state in order to create this effective movement, so we're going to add the property transition, then we're going to target the property transform. We're going to specify a duration and that's going to be 5 seconds and we want these animations to start after a 1 second delay and also we're going to use the timing function and the value ease-in in order to allow the animations to start slow and to finish faster. We're going to save now then try this out in the browser. We're going to refresh the page. You're going to see that as soon as we mouse over the bike rider, so that's going to take 1 second to start because we have applied a 1 second delay, so the rider will move across the screen. It's going to start slow and finish faster, but there is a way to control the speed, but also to add variations to the curve of the animation, and that is possible with the function cubic-bezier that allows to create custom timing function, so we're going to go to the website to see how this works and how we can use it. The functions cubic-bezier works just like transitions timing functions. It takes four parameters to indicate the position of the curve on the X and Y axis and two other values to indicate the position of the handles, so you can then define, control this one to define your own values that range from 0 to 1, and on the right you have a fair example that we know already like ease-in and ease-in-out, and we can play with the handle, change the position, and you can see that as we change the position of the handle that the values are changing at the top, and once you have settled on one custom function you have the possibility also to preview and compare, so how it would render, how it would behave for your demonstrations, so you can click go and preview and compare with another timing functions to see how your animations would render with this custom timing function. Back in the code, and you know we're going to use the function cubic-bezier, and I'm going to give you the values that I'd like to apply for this animation in order to make this one custom, so we're going to write cubic-bezier. The first value will be 0.66, then you're going to write 0 separated by a comma, another 0, then we're going to finish with a value of 1.29, and that's going to allow to have a custom timing function for this animation. We're going to save then go back to the browser. We're going to start the animation again, by mousing over, so you'll see that the rider will start slow and finish very fast, and that was achieved with the function cubic-bezier, so you can go back to the website cubic-bezier, and play with the handle, change the position in order to create your own custom timing functions, so you can see how it renders, and which one would work best for your animation. We have learned about transformation of HTML elements in a 2D space, and in the next module we're going to take it to the next level and learn to animate in 3D, in three-dimensional space, so see you in the next module where you're going to discover how to create nice animation effects, nice 3D animation effects for your users with practical examples and demonstrations, and hands-on project that we're going to be completing together.
  19. Transforming and Animating in 3D Introduction In this module we're going to take it to the next level with 3D transition and animation. Let's start with the usual reference to the W3C group definition. CSS 3D Transform extends CSS Transform to allow elements rendered by CSS to be transformed in three-dimensional space. The transform methods are basically the same. In 3D Transform we use the same coordinates to indicate the position of transformed elements on the X and Y-axis. The X-axis allows to transform horizontally while the Y-axis allows to transform vertically. Finally, the Z-axis allows to transform front and back, so with the Z-axis you can then transform elements outside of the 2D pane. Here is one example. You're going to see that when we mouse over the element will be transformed outside of the 2D pane. With this example of 3D ROTATE we'll have a chance to discuss about this method, which is used in 3D Transform. You will be introduced to new CSS properties in this module. First there is Perspective. In 3D Transform we need to use the Perspective in order to transform in 3D space. The Perspective-origin property defines where 3D elements are based on the X and Y-axis and then there is Transform-origin, so this one is new to you, and this property allows to change the original X and Y positions of the transformed elements. Then there is Transform-style that allows child elements to preserve 3D Transform. Finally, we have a Backface-visibility, which is a property that defines whether or not an element should be visible when it's not facing the screen, so we'll use Backface-visibility in the upcoming tutorials in which we're going to ultimately display the front and back of elements. If all of this seems really foreign to you right now you can be assured that we'll see them in multiple examples and I believe that this is better shown than explained and that's going to make more sense to you then. We will start in this module with perspective, which is the first approach to 3D Transform, also the most important because in order to transform in 3D space you must establish a perspective first. Then we're going to talk about 3D Transform Methods that that are not much different than the 2D Transform method that you learned in the previous module, but this time you're going to learn to transform elements outside of the 2D space, and we're going to apply all of that with a 3D Transitions demonstration. After that we're going to move onto the tutorials. First the flipping pictures and also the rotating cube and the last one will be split into parts. I will first show you how to create a cube, then we will animate this one by adding transition. Let's start in the next video with perspective.
  20. Perspective To represent 3D in a 2D medium you have to first establish a perspective, so what is perspective? This is the distance from the viewer to the object. This is the manner in which objects appear to the eye in respect to their relative positions and distance. This is how objects are represented in respect in relation to its surroundings. The perspective is also a method of representing three-dimensional volumes, and spatial relationships on a flat surface. In 3D Transform the perspective defines the 3D view of a transformed element and this is what we're going to apply, we're going to do in our next demonstrations. If you're familiar with photography we can refer to the same perspective that we use in photography or cinematography, so on this photography example the further we go the smaller would be the value of the perspective creating this effect of depth or 3D effect. On this photograph is we have an alley in a garden or a backyard and the further we go the smaller seems the far back, so all the objects and elements on this picture seems to be vanishing to one single point creating this effect of depth, and same with drawing where you have the concept of the vanishing point. In art perspective drawing is a technique used to represent three-dimensional images on a two-dimensional picture plane. With this drawing, for example, we have the same illusion of two parallel lines converging to become one the further we go. We actually do not see two lines, but that's the idea, so that's the effect that we have on the eyes with object that seems to be all converging to one single point or the vanishing point creating the 3D view of the drawing on a flat surface. Here is another schematical demonstration of a drawing with the vanishing points on the flat surface or 2D pane in CSS Transform. The perspective creates the effect of depth and distortion will all the lines converging to one single point, so that is the vanishing point that we have been referring to and this is what creates the 3D effect in drawing or photography, so we're going to apply the same concept, then we're going to do our CSS 3D Transform demonstrations. Here is another, last one, example to illustrate the point of linear perspective with the vanishing points. On this example, so on this picture, the artist used the concept of the vanishing point to create the illusion of depth and realistic 3D view of a cathedral, pretty well done. In drawing and painting linear perspective is a form of perspective in which parallel lines are represented as converging, so as to give the illusion of depth and distance, and it's the same with 3D transform where the perspective is what defines the 3D view of our transformed elements, the bigger the value the further the object seems, with the value of 1500 pixels, for example. Well a lower value will bring you closer to the object with 500 pixels, so we're going to go on this website in order to make a few demonstrations with perspective. With this representation of a cube here you can follow the same link in order to make a few demonstrations. The value of the perspective is what defines the intensity of the 3D effect, so that is the first slider where you have the value of the perspective that you can change and the default is 1000 pixels, so the greater the value the further is the distance, and the less defined is the 3D visual effect, so for example, we're going to increase the value of this perspective, and you're going to see that the 3D effect will be more subtle and we can do the opposite by reducing the value of this perspective and that's going to create a great more defined 3D effects and you can also change their perspective origin with the sliders below, so the perspective origin for a 3D space is positioned by default at the center with the values 50% and 50%, so the first value represents the X-axis and the second value is for the Y-axis, so the perspective-origin is just like the vanishing points that we've been referring to in art, drawing, or photography, so you can change the position of the vanishing points with the perspective-origin property, so we're going to be able to change the original position of the vanishing point for this cube by changing the values of the perspective-origin, so first on the X-axis by decreasing the value we're going to be able to move the vanishing point towards left or the opposite towards right by increasing the value, and you can also change the perspective-origin on the Y-axis. In the upcoming demonstrations we will incorporate the perspective to the transform methods to create 3D Transform animations, so let's talk about 3D Transform in the next video.
  21. CSS 3D Transform In this video lesson we're going to see examples of CSS 3D Transfer with the 3D Transfer method, so it's just like the 2D Transform methods that we have seen earlier. We're going to use the same coordinates to indicate the position of the transformed elements on the X and Y-axis, so on the X-axis you can transform horizontally. The Y-axis allows to transform vertically, plus with the Z-axis you can transform front and back, so outside of the 2D pane in 3D. We're going to start with one method you are already familiar with and that is Translate that allows to move elements around the screen, so first horizontally with the method TranslateX, also vertically with the method TranslateY, and finally, you can also move an element outside of the 2D pane in 3D by using the method TranslateZ. You can also use the options of the shorthand in order to keep your code to a minimum with the method translate3d and this method takes three parameters, so the first one for the X-axis, the second one for the Y-axis, and finally, the third one for the Z-axis, in order to transform in 3D. Then we have the method Rotate, so just like Translate, it's possible to rotate on the X-axis, also on the Y-axis with the method RotateY, and then outside of the 2D pane by using the method RotateZ and we also have a shorthand that takes four parameters, so the three first ones will allow us to target the X, Y, and Z-axis, and with the fourth parameter we're going to indicate by how much, so in degrees we want to rotate these elements, so with what angle? Let's look at one example, so I'm going to mouse over this first square, you're going to see that this is going to be rotated outside of the 2D pane with 3D Rotate, then this second example we're going to be able to move this element outside of the 2D pane as well with 3D Translate, and we're using transitions as well, that's allowing to see the animations from the flat positions to the 3D transformation. Also, you have the method scale, so you are familiar with this one as well, so you have the method ScaleX that allows you to increase the original width of an element. You have also ScaleY in order to increase the original height of an element, so in order to transform vertically, and finally, you have the method ScaleZ that would allow to transform in 3D, so one information about this method though, so this method allows to transform on the size, which is different of the two other methods that we have seen, like translate or rotate, that allows to transform elements and movements. For this one as well, you're going to have the shorthand and that's going to be scale3d. We're going to look at another example with the method rotate. First you have ROTATE X in order to rotate an element on the X-axis, so that's going to be by 180 degrees or ROTATE Y in order to transform the same element, but this time on the Y-axis. With ROTATE Z you can then rotate this one this way, so clockwise, so when it's used alone, so this is the effect that this is going to produce, and then when we use all the three combined, so by targeting the X, Y, and Z-axis, so the four parameters will be for the angle by how much we want to rotate this element. You say that this is going to be rotated outside of the 2D pane, and for that example we're going to use a new property, so that is Transform-origin that allows to change the original X and Y positions of the transformed elements, so just like the property Perspective-origin, the Transform-origin property has default values, so they are 50% and 50% to indicate the position, the original position of the transformed element on the X and Y-axis, so we're going to change this ones with 40% for the X-axis and 20% for the Y-axis and the result will be that when we rotate now on the first example, so the first square for the example with the method ROTATE X by 180 degrees, so this one will be slightly shifted by 40% on the X-axis because we're using now the value of 40% for the X-axis and for the ROTATE Y, so we're using 20%, so because we have changed the original value from 50% to 20% you're going to see that this is going to be slightly shifted towards the left. We're going to do the same demonstrations with ROTATE Z. You can see that now this is transform rotating outside of the original position that was originally at the center, and same for the last example where we are using the method ROTATE 3D. In the next video we're going to complete together 3D Transition demonstrations, so see you then.
  22. 3D Transition Demonstrations In order to begin with this demonstration we're going to use the folder named demos that you're going to find in your demo files, so inside you're going to have the files index.html and style.css. I have these ones open in my Code Editor Sublime text. On the index.html you're going to see that we have three different sections, so that is the div with the class box. First we're going to work with ROTATE 3D for the first example, secondly we're going to work with the method Translate 3D, and the last example will be with Scale 3D and on the right on the style.css we are targeting this element with a class box with a width and a height of 220 pixels to create a square or a box. Then we're using a display inline-block in order to have these elements next to each other, as opposed to stacked on top of each other, because by default div elements are block level elements, and then we are addingsome margin to leave some space around, and also a border. Finally, we're using position relative because we have a child element inside this element, and we are targeting this one with the next selector, which is box div, and for this one we're using position with the value absolute, also a width and a height with a value of 100% in order to allow this child element to integrate from the width and height of the parent element, which is 220 pixels. Next we're going to target each of these elements individually with a background and we're going to use the function hsla. That stands for Hue Saturation and Light. A stands for Alpha in order to control the opacity, so this function takes four parameters, so the first one will be for the hue in order to indicate which color you want, and that's going to be a value between 0 and 360. The second value will be to target the saturation, so that's a value in percentage, and 100% will be fully saturated and 0% is going to give you grayscale shades. The third value is going to be to control the lightness, so that's also a value in percentage. 100% is going to be completely white and 0% is going to be completely dark, so we're going to use the average, which is 50%. The last value will be to control the opacity with alpha, so that's a value between 0 and 1, 0 being completely transparent, and 1 fully opaque, so we're going to use the value 0.6 in order to have something translated. Now let's see how this looks in the browser. We have our three squares that are aligned next to each other, so they have a black border edge and we're also using a different background color for each of them, so the first example will be for ROTATE 3D, so that's going to be the first scroll, but then in the middle we're going to have our demonstrations for the method TRANSLATE 3D, and finally, we're going to complete the demonstration with the method SCALE 3D. Back to the Code Editor you're going to see that we are targeting the same elements, but on hover this time, so we're using this to the class hover, meaning that we're going to have a final state, and for the final state we want to transform this element in 3D space, so we're going to start with rotate, so we're going to start with the property transform, and for this first example we're going to use the method rotate, and that's going to be rotated on the X-axis, so that's going to be the method rotateX, and for the argument we're going to use 180 degrees, and we're going to also rotate this element on the Y-axis or we're going to use another method on the same line, so that's going to be rotateY, and we're going to use the exact same argument that's going to be 180 degrees, so we're going to save our document, then check this out in the browser. In the browser I'm going to mouse over the blue square, so you're going to see that, this is going to rotate on the x and Y-axis by 180 degrees, although there was no transition, and more importantly, there was no 3D transformation, so in order to transform in a 3D space you must first establish your perspective, so we're going to go back to the Code Editor and find the selector which is targeting the parent element on this page and I need the selector box. We have this line which is commented out for now and we're using the property perspective with the value 600 pixels, so we must always establish a perspective in order to transform in 3D space, and this one must be applied to the parent element. The default value is 1000 pixels. In that example we're just going to use 600 pixels. We have another selector in order to target the child elements that we have inside the div with the class box and we're using the property transform-style with the value preserve-3d. This one is used in order to preserve the 3D view also for the child elements. The property transform-style has a default value flat, so you must always specify this property with the value preserve-3d in order to allow child elements to be transformed in 3D space as well. You're going to have a parent element on which you're going to specify establish or perspective, then for the child elements you must always specify the property transform-style with the value preserve-3d, so we're going to save these changes and try this out in the browser. You're going to see that we're going to have a smooth animation, but also a rotation in 3D space, so we're going to make a few changes in the code, so we're going to allow this element to make full rotations by 360 degrees, same for the Y-axis, we're going to make this one rotate by 360 degrees, so that's going to be a full rotation, and we can also rotate the same element on the Z-axis, so we're going to use the method rotateZ, and we're going to use the argument 180 degrees, We're going to save this and go back to the browser, refresh the page, and we're going to mouse over and you're going to see that we're going to have a full rotation, so I'm just going to go back in order to rectify one thing, so in order to have so the rotate3d back in its place in order to have a full rotation we're going to have we're going to need to change the value from 180 degrees to 360 for the rotateZ, so we're going to try that again. We're going to mouse over and this time you can see that the square is going back to its original place by making a full rotation by 360 degrees. You also have the option to use their shorthand, so that's going to be rotate3d that we're going to use in another line, so we're going to use again, the property transform, then we're going to write rotate3d, and this method takes four parameters, so the three first ones will be to indicate the position on the X, Y, and Z axis, so these values are not using any unit of measurement, so they're just numbers, and that's also indicating the transform origin, which is, by default, 50% and 50%, so we don't need to change those ones. Then the fourth parameter will be for the angle, so by how much you want to rotate the element, so that's going to be in degrees, and we're going to use 360 degrees in order to make a full rotation. We no longer need this first line of code, so we're going to comment this one out and we're going to save and go back to the browser, refresh, and you're going to see that when your mouse over we have this full rotation in 3D space. Let's move onto our next example with translate, so we're going to proceed the same way, we're going to use the property transform, and the method translate in order to move the element around, so that's going to be first horizontally by using the method translateX, and for the argument that's going to be 40 pixels, so that's going to allow to move this element from left to right by 40 pixels. We're going to also move this element on hover on the Y-axis, so that's going to be vertically by 40 pixels as well. Every time we mouse over, so we're going to save that, then refresh the page, and try this out. You're going to see that when we mouse over we're going to move this element by 40 pixels from left to right, but also from top to bottom. I'm going to make this element move in a 3D space as well and for that I'm going to use the method translate, so that's an argument also in pixels, so I'm going to use 30 pixels, so I'm going to use 30 pixels, but I'm going to change that to 50 pixels, so you can see actually the effect of the square moving towards the viewer, so we're going to save that and we're going to try this out. This is going to be moving from left to right, but also vertically, and also from back to front, as if it was coming to you. It's like a 3D effect and this was achieved with translate. With translate as well, you can use the shorthand, translate3d, so we're going to use this one on another line, so that's going to be translate3d, that takes three parameters. The two first ones will be for the X and Y positions, so we're going to use 40 pixels for each of them, and we're going to use a higher value for the Z-axis in order to create the 3D effect of the square moving over to the viewer, so we're going to save this, and go back to the browser. We're going to refresh the page and we're going to try this by mousing over, so the second square, and you're going to see that the square is going to be moving, so horizontally and vertically by 40 pixels, but also from back to front by 70 pixels, as if the square was moving over to the viewer, so we're going to complete these demonstrations with a 3D Transform with the method scale3d that takes 3 arguments. First we target the width, secondly the height, and finally the Z-axis and that's going to allow to increase the original width and height of an element, but also on the Z-axis. We're going to use the numerical value 1.5, so we're going to try this demonstration in the browser, so as soon as we mouse over you're going to see that the scale is going to allow to expand the original size by 1.5 on the width and the height, but there's not much of a difference on the Z-axis and that's because the scale method allows to create a transformation on the size and not on movement, just like rotate and translate. In this video lesson we have seen how to create a 3D transformation with the 3D Transform method. We have also discussed about the properties like perspective and transform style, so we're going to use these ones as well in the upcoming video lesson, so in the next tutorials, and we're going to start with the next video lesson with the flipping pictures.
  23. Flipping the Pictures We're about to begin our first tutorial together and that is flipping pictures. What we're aiming for in this tutorial is to reveal some details about the images every time we mouse over, so for now we are seeing the front, and we want to reveal the back, so every time we mouse over. For this demonstration we're going to use the CSS Transform Method and also the CSS properties like Perspective, Transform Style, and also Backface Visibility. For this tutorial you need the folder named FlippingPictures, so I have the index.html and the style.css open in the Code Editor. We can look at the index.html for now. I'm using Bootstrap for the grid layout, so in order to create a grid with a first and a second rule. I'm using a CDN, so that is a Content Delivery Network, and that means that the resources of Bootstrap are hosted on an external server that's allowing to be much lighter and also to load faster. Also, if you are familiar with Bootstrap you can recognize a few CSS classes, so first container, but then I'm using row also to create the grid layout, and in addition to create the colon I'm using col-md-3 in order to create a 3 column layout, so I have 4 different images on each row. Inside we have some real nested elements. First we have the div with the class album_container, which is going to be used to establish the perspective in order to be able to transform in 3D space. Then you have the div with the class picture and this one is going to be used to alternately reveal the back and front of the picture. For now, by default, the front is facing the viewer, so that is the div with the class front, inside we have an image tag. Then you have the div with the class back and this one includes a paragraph with some _____, so that is just some gibberish text, so you have similar group of elements on the same row, so first the picture 1, picture 2, 3, and 4. That includes also a div with the class album_container in order to establish a perspective and allow the elements to be flipped in 3D space. Then we have a second row. We're going to use another method, RotateX, in order to flip the picture on the X-axis this time. Now we're going to look at the style.css in order to understand how we are targeting these elements in order to create a 3D transformation and animation, so first you have the selector album_container, on which we are establishing the perspectives, so we're using the value 1000 pixels, which is the default. We also have a width and a height of 250 pixels to create a square, so the next selector is picture. We're using also a width and a height with the value 100% and that means that this is going to allow this child element to integrate from the width and height of the parent element, which is album_container, with 250 pixels for the width and height. We're also using a box-shadow, so that is just for the design choice, and very important, the transform-style with the value preserve-3d, so the different value for the transform style property is flat, so in order to allow child elements to be able to be transferred in 3D space, we need to use this property, which is transform style with the value preserve-3d, and we're using the property transition for the transition and animation effect and this time we are using the keyword all, which is going to all to apply the transition effect on any CSS properties for which there was a change in values, so that's something you may want to keep in mind, so you can use the keyword all in order to keep your code short, and that's going to allow to apply, so the transition effect on any CSS properties for which there was a change in values, so you don't need to specify all the CSS property names one by one, you can just use the keyword all. Then we are specifying a duration, so that is going to be the default value, which is 1 second, and also a timing function is linear. We're just going to apply the same speed from start to end. Then we are targeting the element, which is facing the viewer, so that is the div with the class front, which is used to display the picture, so if we're using the position absolute, and this one is integrating from the width and height of the parent element, which is 250 pixels. We are also using this properties.index, which is used to control the stock order of HTML elements, and we want to make sure that this front is facing the viewer on the initial state. Finally, we are using backface-visibility, which is by default visible, so that's why we must specify this one in order to make the backface of the front invisible, when this element is flipped. We're going to see how this works later when we're going to do the demonstration. This element is already by default rotated by 0 degrees facing the viewer, so I'm just using this property transform just for the purpose of the demonstration, just so you understand that the front is facing the viewer by default, and we're going to have this one rotated by 180 degrees in order to flip it over and display the backface of this picture and it's almost the same for the backface, so it has a width and a height of 250 pixels, and this element also includes some content, so we are forwarding this one with a few CSS properties, so the color of the text is white and aligned in the center and there is a background color of medium gray and I saw the backface is rotated by 180 degrees on the Y-axis, so it's not visible, it's not facing the viewer for now, so we're going to make this one visible by flipping it over, so then the front face is going to be invisible hidden, rotated by 180 degrees, and the backface is going to be facing the viewer revealing some content about each picture. Now we're going to create the flipping pictures animation and for that we're going to add a final state, which is going to be triggered on hover, so we want to target the element with a class album container on which we have established the perspective, so every time we hover over this element the child element with the class picture is going to ultimately display the front and back of the picture, so on the initial state the image is going to be facing the viewer, and on the final state of the backface of the picture with the content is going to be facing the viewer. On the final stage we're going to use also the property transform and we're going to add the method rotateY because we want to flip the picture on the Y-axis, so that's going to be by 180 degrees, so we're going to add this argument in parentheses in order to allow so the front face of the picture to be flipped over by 180 degrees revealing the content of the backface of the picture. We're going to save this and we're going to go back to the browser and refresh the page and you're going to see that when you mouse over the pictures of the first row that this is going to be rotated by 180 degrees revealing the text that we have on the backface. We're going to create a similar animation for the second row of this page, but this time we're going to have the images rotated on the X-axis, so we're going to use the same property transform, and for the method we're going to use rotateX and that's going to be rotated by 180 degrees as well, so we're going to save this, and we're going to go back to the browser, refresh the page, and you're going to be able to here as well flip the pictures in order to reveal the backface of the pictures, but this time it's going to be rotated on the X-axis, except that we have something weird. The text is upside down, so we're going to fix this, we're going to go back to the Code Editor and see how we can rectify this. First, we want to display the text from top to bottom, so we're going to target this element, the backface of the picture, specifically for the second row, so we're alternating the element with the id row_2 and we're using the transform property and the method rotateZ with the argument 180 degrees, and that's going to allow to display the text from top to bottom. Next thing is that we want to be able to read the text from left to right, so initially we had applied a rotateY with 180 degrees, which was displaying, so which was hiding the backface of this picture, so now we want to change that, so every time we mouse over we want to be able to read the text from left to right, so we're going to save and checkout how this looks now in the browser. After saving and refreshing the page you can try again. You can mouse over the picture and you can _____ see that every time this is flipped on the backface we can read the text from top to bottom and from left to right, so this is perfect. Now I want to make one last demonstration with backface visibility, so the default value is visible. In order to make sure that the backface is not visible every time you rotate an element or a front face in that instance, you can use the property backface visibility and the value hidden, so we're going to change in our example from the value hidden to visible, and we're going to go back to the browser. You're going to be able to see that every time we mouse over the picture this time for a split second we're going to still be able to see the front, so that's a little bit weird, and it can be fixed by using backface visibility and the value hidden.
  24. Creating the 3D Cube Welcome everyone to the last part of this module. In this tutorial together we're going to create a 3D cube. You're going to see that this is very similar to the tutorial that we did earlier, so the flipping pictures, we're going to use the CSS transform properties, perspective, transform style, in order to be able to transform outside of the 2D pane. We're going to use also the method rotate and you're going to see that this is nothing less than six different faces and squares that have been rotated and moved outside of the 2D pane in order to form a cube. We're going to be doing two parts for this tutorial, so in the first part I'm going to show you how to create with 3D cube, with the CSS transform properties, and the method rotate. That's going to be very straightforward and I'm going to walk you through step by step. Then in a second part I'm going to show you how to animate this cube, and of course, it's going to be with transition, so with the radio buttons at the top we had the option to rotate to display the different faces of this cube, so right or top, and also bottom, and then we can then rotate back to the backface and you also have the options to turn on and turn off the backface visibility, so that's going to be shown later during this demonstration. Now in the Code Editor we're going to use the folder named Rotating Cube and we're going to check out the index.html first. We have the first section, which is for the controls, so this is our input fields, radio buttons in order to select the different faces of the cube, and each of these radio buttons has a unique id and right below we have a couple of radio buttons. In order to have the option to turn on and turn off the backface visibility. Then below again, so we have the sections with the class view_3d, so this is where we're going to form our cube. We're going to establish a perspective first, then we have the different divs that correspond to the different faces of the cube, and they're going to be targeted with CSS Transform properties in order to form the 3D cube. Now we're going to look at the style.css. We have a few styling which is general, so we're going to keep and go straight to the section for the 3D cube, so we have the first selector that corresponds to the parent element on which we have established the perspective, so we're using 1000 pixels, which is the default value for the property perspective. Then we have cube_3d and we're using a property that you're familiar with and this is transform-style, we're using the value preserve-3d in order to allow also the transformation in 3D space for the child elements. Its element is going to have as well a width and a height of 250 pixels, so you see that we're using 100%. It's going to allow this child element to enter it from the width and the height of its parent element, which is 250 pixels, so we're applying also a transition effect, so you see that we are using a transitions property. Here as well we are using the cured all, so which is allowing to apply the transition effect on all CSS properties in which there is a change in values, and this animation is going to happen --- during half of a second, so every time we're going to rotate the cube it's going to happen during half of a second, and the animation is going to start and finish slow, so this is made possible with the timing function that we were using here as well, which is ease-in-out. Then the last selector, so pane, corresponds to the face, so each face of the cube, and we're using the position absolute, so you're going to see that for now, so when there is no transformation applied they are all stacked on each other, and we're applying a _____ opacity, so this is slightly transparent. We're going to move down a little in order to find the corresponding sections to the 3D Cube Creation, so each face has a corresponding class, so we are using a different background color for each, and this is where we're going to apply the --- transform method in order to transform the elements and create the 3D Cube, so let's see in the browser. You see that we have nothing like a cube for now, so all the pane and faces are all stacked on each other, and for now we have the face the corresponds to the backface, which is facing the viewer, and we actually want the front face, which is facing the viewer by default, so what we're going to do, we're going to use the property called z-index, so we're going to use this one for the first selector, which is the one corresponding to the front face, and we're going to use the value 2 and that's going to allow to fix this and have the front face facing the viewer first. Now let's start with some serious stuff. We're going to start with the creation of the 3D cube, so what we want here basically is to rotate each face of the cube in order to have them face each side of the cube in order to create the 3D view, so we're going to use the method rotate starting with the left and right. What we want is to have them face each side of the cube, and we want them to be rotated vertically, so we're going to use the method rotate, and a positive value is going to allow to rotate clockwise, negative value counter clockwise, so we're going to start by turning so the face with the class right, I'm going to use the property transform, and I'm going to use rotateY because I want to have this pane rotated vertically on the Y-axis. I'm going to do the same for the face with the class left. I also want it to be rotated vertically, but this time I want it on the other side, so I'm going to use a negative value in order to have this one rotated counter-clockwise. Okay, so we're going to save this, then refresh the page in the browser, so you're not going to see really the difference, you can actually see the lines of the pane, which are rotated, and that's because for now, so these elements are rotated along the transform origin, which is 50% x 50% you know, this property is actually indicating, so on which position, so originally the element is transformed, so we're going to need to do something else, but that's going to be later. For now we're going to continue with the rotation of the other faces. Now we're going to do the rotation of the top and bottom faces, so that's going to be different here, so we're going to use the exact same method, except that here we want to rotate on the X-axis, you know, horizontally, in order to have them face top and bottom. For the top we want it to be rotated, so clockwise, so we're going to use a positive value, and for the bottom that's going to be counter-clockwise, so we're going to use -90 degrees, so once you've done that we can then go back to the browser, refresh, so you can see some lines appearing, so these are the faces that are rotated, so for now they are hidden behind the front face, so we're going to move them outside a little bit, but that's going to be just after taking care of the backface, so this one we want it to be rotated, so in order for it to face the backface, and we're going to use the same method on the Y-axis, but that's going to be by 180 degrees, so we're almost done with this part, but we would like this object to look --- more like a cube, so for now all of the faces are transformed along the same axis, so right at the center, that's why they are hidden behind the front face, so remember about the property transform origin, so you can certainly change the original position of the X and Y-axis, and for now all of these elements are transformed along the same axis, so right at the center, so we're going to use another method, and that's going to be translate, in order to move this element along the Z-axis, and allow them to be moved outside of the 2D pane, and we're going to start with the front face, so that is the selector, front, so to target the face with the class front, and you're probably noticing that we're not using any method rotate for this selector, and that's because by default the front face is already facing the viewer, so by 0 degrees, and we're going to use again, so the property transform, and that's going to be the method translate. We're going to use the shorthand, so translate3d, and we just want to target the Z-axis, so we're going to leave the 2 parameters, the True first one as 0, and the last one is going to be 125 pixels, which is half the size of the original size of the square, so it's already transformed in the middle, so along the X and Y-axis in the middle of the front face, and we want this one to be moved like by half the size of the square, so we're going to do the same for the other faces. We're going to use the exact same method, translate3d, 0, 0 for the 2 first parameters, and that's going to be 125 pixels in order to move this element outside of the 2 pane along the Z-axis, and that will do. We're going to save the document, then refresh the page, and here you go, so now we have our 3D cube, so each pane is now facing the corresponding side of the cube in order to form the 3D cube. Next thing we want to do is to animate this one, so every time we check one of the radio buttons we want to have the corresponding face to face the viewer then, and we're going to do that in the next video lesson.
  25. Animating the 3D Cube In the first part of this tutorial we have created together this 3D cube. What we want to do next is to animate the 3D cube, so every time we check one of the radio buttons that we have at the top we want the corresponding face to be facing the viewer, and for that we're going to use again, the transform methods, the transform property, and of course, transition, and we're going to start with the backface in the source code, so what we want basically is to have this one face the viewer every time we check the radio button, the corresponding one, so by default this one is not facing the viewer, it is rotated vertically by 180 degrees, so we're going to do the contrary, so in order to have this one back, so to have this one still facing the viewer, we're going to have this one to rotate again, by 180 degrees. We're going to write a transform, so that's going to be the transform property, then the method rotateY, and we're going to use the argument 180 degrees. Now we're going to save and we're going to check this out in the browser, so you're going to see that when we check the back button that now the cube is rotated in order to have the backface facing the viewer, so we're going to do the same for the other faces. We're going to also target each one with a transform property and the method rotate, so basically we're going to use the exact same thing, except that because they were originally positioned in order to have them rotate and face the corresponding side of the cube, we're going to use the exact same method, and we're going to change the arguments. Instead of having a positive value we're going to have a negative value and vice versa. If you are having a positive value we're going to change to a negative value, so we're going to save, and then check this out in the browser. We're going to refresh and you're going to see that when you check the left button, so we're going to have the left face facing the viewer, then we're going to select right, and we're going to have the right face. Now we're going to do the same for the top and bottom faces, so those ones were rotated on the X-axis, so horizontally, and basically we're going to do the opposite, so because we have the top faces rotated clockwise in order to have this one originally in the initial state facing the top of the cube, in order to have this one facing the viewer every time we check the corresponding radio button, we're going to use the same method, rotateX, with a negative value, so that's going to be -90 degrees. For the bottom face that was rotated counter-clockwise in the initial state, we're going to use a positive value, so it can face the viewer every time its radio button is checked. By default, the backface visibility is visible, so we have the corresponding radio buttons on the HTML page, so we have two input fields, so these are radio buttons, and each has a corresponding unique id and once one is checked, so the corresponding CSS property is going to apply, so that's going to be either the value hidden or the value visible, so that's going to allow the user to have the options to turn on or turn off the backface visibility. For each of these selectors though we're going to use the property backface-visibility, and the corresponding value, so this one is for the radio button hidden with the id hidden, so we're going to use the value hidden then. For the one right below, which is going to be for the value visible, we're going to use the same property, but that's going to be with the value visible. We're going to save and then go back to the browser. You're going to refresh and you're going to be able to see that now we can toggle between hidden and visible, so by checking either one of the radio buttons. We're now through with this rotating cube animations tutorial, so there is another option available to you. Instead of having just a background color for each of the cube faces you can have images displayed, so there is lines of code that I made available in the source code, so for now they are commented out. You can remove the comment signs in order to make them applicable in your design, and of course, you can use your own images in order to create your own customized rotating cube. This will mark the end of the tutorials with 3D transform and transition. We're going to use everything that was presented in the course of this class in the upcoming module with the final project, so together we're going to customize and bring life to a webpage by using CSS transition and transform techniques, so we're going to see how to animate navigation links, apply multiple transition effects, and also fade elements in and out. We're even going to use external libraries in order to make the process even faster, so you're going to be able to create nice visual effects in no time, so that's going to be in the next module with the final project, and that's going to be Whistler White Ski Resort.
  26. Final Project - Whistler White Ski Resort Introduction Welcome to the final part of this class. The Final Project. So this is Whistler White Ski Resort, so our task will be to customize a webpage, create a great user experience with transition effects, so together we're going to use the transition properties in order to add interactivity. We're going to use 2D and 3D transition. What we're going to do is animating the navigation links, supply multiple transition effects, and also we're going to add interactivity to these gallery pictures with 3D animation and all of that with CSS only.
  27. Designing with 2D Transform We're going to start with the top section on this page where we can read Whistler White Ski Resort, so that is the title, and we have a navigation right below. You also have some elements, so shapes, on each side of the top section, two squares on the left, and two other on the right and we're going to use the 2D transform method in order to change, transform the shape of these elements, and what we want is to represent the theme of a ski resort, so that is the theme of the page, and that's going to allow to add some style to this page. This first part of the final project will be about 2D transform, so we're going to design with 2D transform, so we're going to go to the Code Editor. You have the index.html on the left and we already have a few resources available, so first we're going to be using the Foundation framework. The Foundation framework is a bit like Bootstrap. It allows to create quickly and easily responsibly out. In our template we're going to use the Foundation icons. That is a collection of icons, which is made available for free by the Foundation framework, so they come ready to use out of the box. Below we are making reference to external libraries, and that's going to allow us to create great transition effects in no time, that's going to be very easy to apply, and last we have the style.css, so this is our custom file that we're going to be touching often in order to create our transition and animation effect. We're going to look at this one on the right, so that is the style.css, so we have a few general CSS rules that apply to the entire page, body, and also headings, so we're going to scroll down a bit, so we're going to find gradients, and that's going to apply to these elements that we want to transform with 2D transform, so that is a lot of lines of code in order to apply a gradient, so then we have the header and the top section, so in the header we're using a background image, and for the top section, so we're going to find all the CSS selectors that we're using in order to target these elements, which are the squares. We're going to find this one, so inside the body these are the very first elements, and that is four of them, and we're using a common class, which is square, in order to create a square shape with a width and a height of 250 pixels, and we're using also position absolutes in order to position those ones regardless of other elements on the page. Then we are targeting these ones individually, so we have topleft, then topleft2, so that is for the 2 squares on the left, and on the right we are targeting these ones with the selector topright and topright2. Next we want to transform these elements in order to customize our page, so we're going to look at the section Designing with 2D Transform, and this is where we're going to specify how we want to transform these elements by using the 2D transform methods. We're going to start with the 2 on the left, topleft and topleft2, and we're going to use the property transform. We're not going to use any transition effect here, so there's not going to be any transitions properties in order to animate a change from an initial to the final state, so that's just going to be the final state. We're going to start with a prefixed party to target Internet Explorer and we're going to use the method rotate and what we want actually is to rotate this element in order to have the corner pointing to the top, and that's going to create sort of like the shape of a mountain, which is the theme of our page, ski resort, so we're going to do that for Mobile Service-transform. Then we're going to use also the webkit-transform property and finally, we're going to finish last with the un-prefixed property, so now let's check out the results in the browser, so now we have the two squares on the left that resemble like mountains, so that's perfect for the theme of this page, so we're going to continue with the two other squares that we have on the right, so what we want is to have them slide this cube, and for that we're going to use also the transform property and this time we're going to use the method skew. That's going to be skewed on the X-axis and we're going to use 20 degrees for the argument, and I want this one slightly skewed to the right, so I'm going to use -20 degrees. I'm going to do the same also by targeting the webkit browsers and finally, last, we're going to use the un-prefixed property for future proof. Here it is. That is nicely customized by using the transform method, so what I'm going to do next is to create and animation, so every time we hover over this little snowflake that we have next to the title for this page, so I'm going to use also the method rotate, but this time I want to create a transition effect, so there's going to be an initial and a final state, so if you look at the code we have an initial state for the snowflake and we're using the transition properties in order to allow the transition from the initial to the final state, and we're going to trigger the animation on the hover, so every time we hover over this image that's going to rotate by 360 degrees. Here as well, we're going to use the transform party, and we're going to use an argument, which is going to be 360 degrees in order to allow the full rotation. We're going to save, then go back to the browser, refresh, and you're going to be able to see that every time you mouse over the snowflake now that it's going to rotate on itself. That was pretty easy to achieve in order to create a nice transition effect, animation effect. Next, what we want is to change the user experience for the navigation, so every time the user mouses over a link there would be a change in the link in order to indicate what part of the navigation that they're mousing over, so we can create a nice user experience by having an initial and a final state, and using the transitions property, We're going to look at this director of the navigation first that we have at the top section of this page. Each of the links that we have, so the anchor tags have a class which is buttons, so we're going to target these anchor tags with this class, so that's going to be an initial and a final state, and you can see that on the style.css we're using the button hover in order to target these elements on hover, so on the final state every time we mouse over. We're going to try with having the font a little bit bolder every time we mouse over the navigation links, so we're going to add the party font-weight with the value bold, you're going to save, and then refresh the page in the browser, and you'll see that every time we mouse over the navigation link this is bolder, so we can certainly try something a little bit fancier and more elaborated, and I'm going to show you that in the next video lesson.
  28. Animating the Navigation Links In this second video of the final project I want to show you how you can create a great visual effect with CSS only and for that we're going to use an external library. So this is Creative Links Effects, so that's going to allow us to make the process easier and faster. I'm going to take you to their website, we're going to see different examples of nice, transitional effects that we can do with the navigation links, so I have added the link to the website in the source file, so you can try them all one by one until you've found the one that you like and that you'd like to add to your project. You have different nice examples and we're going to finish with this one, so that's the one that I'm going to peak in order to add 2 hour navigation links. We're going to go to the source code and you're going to see that the hover id made available the resources for the Creative Links Effects library. That's going to allow us to apply the same type of transition effect for the navigation links and animate the navigation links in our template, so this is Creative Link Effects, and what we need to in order to reproduce the same type of transition effects are the files demo.css and component.css, so we're going to look at the file component.css to see what's inside --- and inside you're going to find the different built-in CSS that we need in order to create a great visual effect. What we're going to use in that example is the class cl-effect-14 and that requires a little bit of digging, so what I mean by that is that there is no documentation indicating exactly which class you should use in order to apply a specify creative link effect, so we're going to use the Inspector tool by doing click right and select Inspect Element, and in the console at the bottom you're going to be able to find out which class has been applied to the anchor tag on the element that we're inspecting, so that is the class cl-effect-14 in order to apply the same type of creative link effect, so this is what we're going to do. I'm going to actually use this class on the parent element, which is wrapping, so including the ul tags, so here I'm going to paste this one, cl-effect-14, in order to have the same type of creative link effect, so we can say then refresh the page in the browser to find out how this looks, and here you go. Now that looks just like the example that we have just seen on Creative Link Effect, so there are plenty of other demonstrations that you can apply to your project or your template, and for that what you need to do is first using the corresponding CSS resources, which are demo.css and component.css, and of course, you need to use the specific built-in CSS class in order to apply the visual effect that you want for your navigation links. As a result of using an additional CSS class we have added extra pixels to the templates, --- and as a result on the right you can see that the square that we're using in order to customize the top section of this template are overflowing a little bit on the banner section, so we're going to go back to the source files, the source code, in order to make a little bit of adjusting, and I want to target the two squares on the right, so I'm going to change the value for the height, so that's going to be 204, so I'm just going to remove a few pixels for the two of them, so that's going to be changed to 204 pixels (Typing), so we're going to save, and see now in the browser, so that looks a little bit better now. Next, what we're going to do is moving onto the banner where we're going to apply multiple transition effects.
  29. Applying Multiple Transition Effects In this video we're going to continue with the visual effects and this time we're going to be focusing on the banner section, so on the left, exactly where you have this video, you see that when we mouse over there is nothing much happening, and what we want is applying multiple transition effect, so we're going to go to the source code and find out which is the corresponding section, so that's the div with the id banner, and we're going to look at the section that includes the video. This image, in order to represent a video player, so we have two elements that we're going to be targeting, so that is first the anchor tags and the p tags. First the anchor tag includes an icon that are used to create a play button, then you have the p tags with the text Learn more, so we're going to look at the CSS to see how we are targeting these different elements in order to create the visual effect. We have first the CSS selectors for the initial state and we have all the CSS selectors that we're going to need to complete in order to create a visual effect for the final state every time we hover over these elements, so first we have the Learn more text, which is targeting with the class btn-more, and we also have the play-btn, so we're going to target these icons with the class button play. What we're going to do is to highlight this text, Learn More, every time we mouse over this image, more specifically, every time we target we hover over the anchor tag, and in this initial state to target the button more I'm using rgba, the function rgba to create the color, so that takes four parameters. First the red, second the green, and the third value will be for the blue and then with the fourth parameter, which is used to control the alpha, which is the opacity, so this fourth parameter will be a value between 0 and 1, 0 being transparent and 1 fully opaque. Right now we're using 0, which is going to give us a color which is completely transparent, so we don't see anything, and I'm going to use the same function, rgba, for the final state, and I'm going to change this fourth value to 0.8 in order to have a color, which is slightly translucent, so let's try that now. You're going to see a difference every time you mouse over this image, so now we have this button which is highlighted in black, so there is just one last thing that we need to change, it is the color of the text, so, of course, you can apply a multiple transition effect, and this time we're going to target the color, so we're using black for the initial state, and we're going to use a different color, white on black, for the final state. This time every time we mouse over we're going to have the background, which is going to become slightly translucent black, and the color, which is going to turn to white. The other elements that I want to animate is this play button, so that is an icon that I'm using from the Foundation Icons Library, and I want to animate this one every time I mouse over, so I want to make this one more visible, and I'm also controlling the opacity on this element, so if you look at the initial state you're going to see that I'm using also the function rgba for the color, so this time I'm using for each of the arguments the value 255 in order to have the color white, and for the last argument I'm using 0.5, which is between transparent and opaque, so I'm going to increase this value for the final state, so every time I mouse over we're going to be able to see that this time this play button icon is going to be like lighting up every time we mouse over. Applying multiple transition effects is a nice way to add interactivity to your template and bring life to your webpage. We're going to see all the examples with 2D transition and 2D animation in the next video lessons.
  30. Gallery Pictures: Scaling Up with 2D Transition The previous demonstrations have showed you how to animate the navigation links and also how to apply multiple transition effects, so what we're going to look at is the Gallery, and we're going to look at making these images interactive. On the index.html we have the sections for the gallery, so that starts with some text, then we have another row that includes the different pictures, so first you have this element with the class picture that includes the front and back, so inside the front you have a caption and also a Learn More button, and you have this back section as well with different elements, but for now we're not going to look at the back, we're just going to be focusing on the 2D transition. You have picture 1, picture 2, picture 3, and 4, so that's 4 of them in total. We're going to look at the CSS to see how we are targeting them and how are we going to proceed for this particular demonstration with 2D transition. We have an initial state and, of course, a final state, so this is where we're going to specify what visual effect we want to create every time we mouse over the image, so this is where we can read 2D transition, and the purpose of this demonstration is to have the images scaling up every time we mouse over, so we're going to go step by step. First we want to target these elements that we have inside the element with the class front, we have a caption, and also some text that reads Learn More. The first step is fairly easy, so we're going to target these elements, so with the text Learn More, so we're using the property opacity with the value 0, so meaning that right now this is transparent in the initial state. We're going to make this one visible for the final state, so every time we mouse over the image. Let's use the same property opacity, but that's going to be for the final state. You see that we are targeting this one, so every time we mouse over the image, and we're going to use the value 1 in order to make this text visible when we mouse over the image. We're going to save these and refresh the page in the browser. When you mouse over you see that now we have this text, Learn More, which is becoming visible, and it disappears again, when you mouse out. Each image has a caption and we're going to animate this one when we mouse over the images as well and for that we're going to use the property transform and that's going to be the method translate because we want to move this one on the screen every time we mouse over the images, so we're going to use the method translate, and target the x and y position and we're going to use negative values because we want to move these elements on the opposite direction, so that's going to be from right to left by using the value -30 pixels, and that's going to be from bottom to top by using -20 pixels for the Y-axis. Now you see that when we mouse over we have the caption which is moving out of the --- picture frame and it's going to stay within the picture frame every time we mouse over, so we are yet to complete the entire animation, which is to add the method scale to the images itself every time we mouse over. We're going to finish and this time we're going to target the image itself and we're going to use also the property transform and the method scale, so that's going to be for the selector at the top. The value 1 is going to be the same as the original size, so in order to have an increase in size we're going to use a number which is higher, so that's going to be 1.2 in order to have a width and a height which is slightly increased every time we mouse over. We're going to save and refresh the page and you can see that now we have this image, which is scaling up every time we mouse over. We also have the Learn More button which is appearing, which is visible, and the caption, which is moving up and left. There is one last adjustment to make in order to make this demonstration complete and this has to do with the stack order that we can control with the properties.index, so you are probably noticing that we are using multiple times the property z-index in our document, and that's because we have multiple elements that are stacked on top of each other, and we need to use the properties and index in order to indicate in what order we want these elements to appear, including for the element which is rubbing the images, so every time its moused over we want to make sure that this one is covering the rest of the other images, so we're going to use the property z-index and the value 5, so we're going to make sure that this value is the highest to make sure that the image, which is hovered over is covering the rest of the other images. Finally, I'm going to make one last addition, and this is for the visual enhancements of this demonstration, so what I want is to add some shadow every time we mouse over the images, so we're going to use the property box-shadow, so we're going to target also the images on hover, so the property is box-shadow that takes four different values, so the three first is to indicate how much of a shadow you want, so on the X and Y position, so the third one is optional, so this is to indicate the blur, and the last value will be for the color, so we're going to use dark gray. Here it goes. That's a little bit better. We can certainly change the value in order to adjust the appearance of the images every time you mouse over, so that's it for the 2D transitions demonstrations in order to add interactivity to the images. Next, we're going to look at how to animate the images every time we mouse over, but in 3D this time. That's going to be in the next video.
  31. Gallery Pictures: Rotation in 3D In this part of the project we're going to make the gallery section even more interesting and interactive by allowing the pictures to animate in 3D and reveal the backface of each of the pictures. We're going to look at the section for 3D transition on the style.css. You can see that we can target the front, but also the back of each of the pictures. Looking on the HTML page you're going to see that we have this section for the front, but also for the back, where we can read that we have a title, an author, but also a source, and we have an element, which is wrapping the two, which is with the class picture, and this is this element that we're going to flip in order to reveal the backface of each of the pictures. Then you have a parent element, which is with the class img, and this is where you're going to establish the perspective in order to allow the 3D animation. We're going to target this one with the property perspective and we're going to use the value 1000 pixels. We're going to also target the child elements with another property, which is transform-style, which is necessary in order to allow the 3D animation, also for the child elements, so we're going to use the value preserve-3d, and that's going to allow to preserve the 3D animations for the child element. Then, by default, the front face is facing the viewer, but we're still going to use the method rotate with 0 degrees for the purpose of this demonstration, and of course, you don't want the backface to face the viewer, so we're going to use the same method rotate, but with the value the argument 180 degrees, so _____ is in position absolute in that example for the front and the backface, so by default the backface is not visible, so we're going to continue with the demonstration, and this time we're going to specify so the visual effect that we want for the final state on hover. Every time we hover over the image we want to target this element picture that includes the front and the back. We'll also want to comment out the CSS property that were for the 2D transition in the previous demonstration to make sure that it doesn't conflict with our current demonstration, so next what we're going to do is using also the method rotate to target this element picture on hover, every time we hover over each of the images in order to reveal the backface. We're going to save and try this in the browser, and this is working, so every time we mouse over we have this element with the class picture, which is rotated by 180 degrees, although it's a little bit weird, so what we need to do is to use this other property, which is backface-visibility to make sure that the front is not visible when we have this picture element, which is rotated, and also the backface not visible every time we mouse over the image, so we're going to use backface-visibility, and use the value hidden for the back or the initial state, and on the final state, so every time we hover over the image we're also going to use backface-visibility then hidden, and that's going to allow to fix the problem, and you're going to see this time that this is more clean, so more lifelike, like a flipping movement, so every time we mouse over the image we can flip this image and reveal the information that we have on the backface.
  32. Contact Us with an Original Button Link Now we're going to tackle the Contact section of this tutorial, so this final project, so that is the section with the class contact, and inside you have an anchor tag where you can read Contact Us, so just like the beginning of this tutorial, this final project, we're going to use an external library, so that is Creative Button Styles, so by using this library you can use some built-in CSS in order to achieve, so to create this final result, so like this button, so this is what we're going to use for the final template where you can read Contact Us. We're going to customize this link, and so we're going to use the resources provided by this library in order to help us customize easily this link in order to create a creative button, so we're going to find the resources that we need in the folder btn_effect, we're going to open component.css, and here you're going to see that we have a list of built-in CSS classes that we can use for free ready to use out of the box in order to create the creative buttons, and here we have found the corresponding sections, so this is the button 2a, so we're going to add the class attribute in the opening anchor tag, and we're going to use the common class, which is btn, and we're going to follow with a couple of other classes in order to specifically create one style of a button, so it is just like the example that we have seen on the website, and just like we have seen at the beginning of this final project tutorial, in order to find out which class you need to use, you can use the inspector tool with the Chrome browser, so you're going to do click right on the element that you want to inspect, and select Inspect Element and you're going to be able to see which class has been applied to this element in the console. Now we're going to go back to our template and refresh the page and here you go, so now we have the same style button, so this is a red button, so in order to have a button which is blending with the rest of our template, we're going to customize this one with our own custom style, so we're going to go back through the style.css, and in order to be able to overwrite the original styling we're going to target this element with the same CSS rules that have been used in this external library, so we're going to start with the class btn-2 and we're going to use one color, so that's going to be a medium gray, and we're going to apply also our own background-color, so that's going to be a light gray, and also we're going to apply a box-shadow, so in order to change from a red to a medium gray, so we're going to use the exact same gray that we're using for the color property. Let's see. We're going to reverse the page and here you go, so now we have the square button, gray style button, which is more in line with the style of this template, this webpage, so when you mouse over you see as well that we're going to need to change the styling on the final state, so we're going to target, so the same element on hover, and we're going to use the color property and the same value, which is a medium gray, and we're going to add also the box-shadow to make sure that this one is darker as well when we mouse over this element, so the link. We're going to do the same for active. We're going to save and then go back to our template, refresh the page, and you're going to be able to see that we have the same styling, so on the initial state and also the final state.
  33. Conclusion I really appreciate you taking the class, so I hope that you enjoyed it, and that you could get a lot out of CSS Animation with Transition and Transform. These lessons were a good overview of how to add interactivity and enhance the user experience of a webpage. You can now use it in your own work, your own projects, in order to impress your users, so bye for now, and keep on coding.