CSS Transforms and Animations div { width: 100px; height: 100px; background-color: blue; border: 1px solid black; } This is a div element Your tasks for

CSS Transforms and Animations

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.

Is the following correct?

This is a div element