Shape of the Day:
- Review Animation with some Exercises
- Begin 2D Transforms and Transform Property
Website of the Day:
https://routeshuffle.com/ – A 16 year old made this website to help walkers, runners and cyclists explore new routes!
1. Animation Exercises
- Complete these 6 animation exercises from W3Schools
- Take screen shots of their completion and prepare to attach them to the appropriate assignment on Teams.
- Find two websites with animations on them – save the links somewhere and prepare to attach them to the appropriate assignment on Teams.
2. 2D Transforms & Transform property
- CSS transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size and position. CSS supports 2D and 3D transformations. The transform property can be used to create animations in CSS.
- Take a look at the transform property and the many values
- Download the code and view the two animations by downloading the two images and putting them in their appropriate places on the HTML code. Save this file as css-animations-transforms.html. Once you are comfortable with what is happening, create two more animations with two new images.
- Note: The transform property has different values for translating, rotating, scaling and skewing. This makes it useful on its own without animation. It can be used to rotate images like you can see here
- Once you have completed the two animations, complete these 4 exercises – take note, these are not animations, however they are using the transform property to practice translate, rotate, scale, and skew.
- Remember to take screen shots of the completed tutorials and be prepared to add them to the appropriate Teams assignment.
- If you need a reference or some extra help with 2d transforms, click here