Course 201 Class Fourteen “CSS Transforms, Transitions, and Animations”
Transforms
With CSS3 came new ways to position and alter elements. Now general layout techniques can be revisited with alternative ways to size, position, and change elements. All of these new techniques are made possible by the transform property.
The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.
2D Transforms: Elements may be distorted, or transformed, on both a two-dimensional plane or a three-dimensional plane. Two-dimensional transforms work on the x and y axes, known as horizontal and vertical axes. Three-dimensional transforms work on both the x and y axes, as well as the z axis. These three-dimensional transforms help define not only the length and width of an element, but also the depth. We’ll start by discussing how to transform elements on a two-dimensional plane, and then work our way into three-dimensional transforms.
2D Rotate: The transform property accepts a handful of different values. The rotate value provides the ability to rotate an element from 0 to 360 degrees. Using a positive value will rotate an element clockwise, and using a negative value will rotate the element counterclockwise. The default point of rotation is the center of the element, 50% 50%, both horizontally and vertically. Later we will discuss how you can change this default point of rotation.
Questions
- What does a CSS transform allow the developer to do to an element?
It allows you to rotate, scale, skew ,or translate a n element.
- Provide an example of a transform and how you could see that being used on a website.
Scale allows you to change the displayed size of an element.
- What does a CSS transition allow the developer to do to an element?
It provides a way to control the speed of animation in an element.
- How does a CSS animation differ from a CSS transition?
Transitions are best for movment to or from while animations are for more complex movements.
- What are some benefits to using CSS transitions on websites?
It allows for changes in properties to be instituted over time instead of immediately.