css transforms and animatio
div {
width: 100px;
height: 100px;
background-color: blue;
border: 1px solid black;
}
This is a div element
Your tasks for this Critical Thinking activity are:
With the transform property, move the element 100px to the right, and 200px down.
With the transform property, rotate the element 150 degrees around its X-axis.
With the transform property, rotate the element 120 degrees around its Y-axis.
With the transform property, rotate the element 90 degrees around its Z-axis.
Add a two second animation for the element, which changes the color from blue to red. Call the animation “example”.
Add the following five steps to the animation “example” (using 0%, 25%, 50%, 75%, and 100%):
0% – Set background color to “blue”, left position to “0px”, top position to: “0px”
25% – Set background color to “red”, left position to “0px”, top position to: “200px”
50% – Set background color to “green”, left position to “200px”, top position to: “200px”
75% – Set background color to “yellow”, left position to “200px”, top position to: “0px”
100% – Set background color to “blue”, left position to “0px”, top position to: “0px”.
Specify that the animation of the element should have a “1” second delay before starting.