Learning to use the new CSS3 Transform Property

We introduce the 2D and 3D environments in CSS3 and begin to break down the many methods that are available as we style our HTML pages. We discuss Browser support and fallback coding and then jump into the methods that we cover in this lesson. In this lesson we cover the translate() method and how it moves an element from its current position to parameters given on its X and Y axis. Then we demonstrate the rotate () method and how this method rotates an element clockwise and counter clockwise according to a given degree setting. We close out the chapter with a demonstration on the scale () method and how it is used to increase and decrease the size of an element.

In Chapter we continue to learn the new methods of the CSS3 Transform Property and dive into the skewX() method then move into the skewY() method and the skew() method which is a shortcut for both methods. We wrap up this chapter with a discussion on the matrix() method and how all 2D methods can be combined into a single matrix method.

In this chapter we discuss and demonstrate the rotateX () method which defines a 3D rotation along the x-axis, then we move into the rotateY () method and demonstrate the 3D rotation around the Y axis, following up is the rotateZ() method which allows 3D rotation along the Z-axis and then we close out the tutorial with a discussion and demonstration of the perspective () method and how perspective is used in CSS3 and HTML5.

In Chapter 4 we spend the video explaining and demonstrating numerous different aspects of the Perspective Method in CSS3 and how that method should be implemented in your projects. We spend a good deal of time demonstrating the perspective method and the perspective method placement in your document structure. We demonstrate placing perspective on multiple elements and demonstrate the difference between individual element placement and placement on the parent elements.

In Chapter 5 we begin to put it all together. In this tutorial we will put all of the knowledge that we have gathered in the previous tutorials together and build a Card Flip application. We begin the tutorial by building a Card Flip application that is triggered by a pseudo hover effect in CSS3. Using many of the methods that we have been discussing in the previous tutorials we build our application to animate a card flipping over when the card is hovered over. We demonstrate how different information can be on each side of the card and discuss many different ways this type application could be utilized on your web pages to save space and add information to the web page.

We wrap up the video by then adding additional functionality to our application adding some JavaScript and a onclick event to our div elements so that the actual Card Flip trigger is triggered by a Mouse Click.

In Chapter 6 we once again push the limits of what we have learned in the previous tutorials by building an animated 3D cube display on our web page. Using many of the methods we have been discussing we build our 3D cube and then introduce the animation properties of CSS3 to animate the cube as it rotates on our web page. In this tutorial we also demonstrate how we can use fall back coding to support some of our older browsers with moderizer.

In the previous tutorial we learned the basics of building a 3D cube using HTML5 and CSS3, now we take that a step further and build our cube with user interaction functionality. In the previous demonstration we allowed our cube to animate with very little control by the user. In this demonstration we build our cube around the logic that the user will determine what side of the cube is displayed and use the cube as an interactive device. We also demonstrate how the cube can be used as a menu system or navigation system on the web site. We input new elements into our cube and demonstrate links, paragraphs and images as part of the cube surface.

Using all the information that we have learned over the course of the tutorials be build our 5 slide Carousel application. This application utilizes many of the methods that we have been discussing over the course of the tutorials. We cover some new concepts on how to target selectors in CSS, we utilize the hsle properties of CSS to add transparency to our Carousel slides. This is a very informative tutorial on 3D concepts in CSS and HTML.

In this tutorial we expand on our 3D Carousel application by adding an additional 5 slides to our Carousel. I also have a small presentation on how the translateZ is calculated so that once the user completes the tutorials then can design their own Carousels with any number of sides they desire. We add more functionality to our Carousel by adding links, icons and text to the Carousel sides and wrap up the tutorial with a review of the concepts.

In this three part series we build an enhanced hover effect using the Transform Property of CSS3. This is an amazing effect that allows for the use of multiple objects to moved and faded out of the way as the item is hoverd over. We utilize the translate methods, the scale methods, opactiy and the animation methods to produce this effect. Watch the promo video on what we have added to the tutorial series. Click To View Preview