
Explore how transform-origin changes the rotation origin in CSS transformations, rotating elements by 25 degrees and switching from the center to the top-left origin, with hover effects and cross-browser notes.
Explore CSS3 transitions and 3d transforms with a card flip, including front and back faces and a one-second transition. Implement toggle switches with before/after pseudo elements, prefixes, and progressive enhancement.
Apply simple CSS animations and transitions to create blurred link effects using white text shadows, color changes, and transparency, with a tech shadow check for browser compatibility.
Explore CSS3 loading icons and spinners created with a single div and border effects, powered by spin keyframes, to replace GIFs for Ajax tasks and long-running operations.
This CSS3 Transformations And Animations training course by Infinite Skills introduces you to rotating, skewing, scaling and mirroring elements in 2D and 3D space, and then combining them to create animated sequences. This course is designed for users that already have a fundamental understanding of HTML5 and CSS3.
Craig begins this video tutorial with an examination of 2D transformation techniques Topics that he covers include; translations, scaling, rotations and skewing. Once you have grasped these fundamental transformations, Craig takes you to the next level with 3D transformations. As you continue through this video training course, you cover transitions and full-out animations. You will learn how to create keyframes, and practice what you learn by working through real animation examples with the author.
Once you have completed all the lessons for this CSS Transformations and Animations video based training course you will have a solid grasp on the techniques required to create your own spectacular animations. The author has included extensive working files to allow you to follow along throughout the lessons.