CSS Transforms

Intro

Transforms were recently added to CSS. They allow you to transform elements in 2D or 3D. This can be used to create some interesting views, such as CSS Dice. The most basic transforms are translate, rotate, and scale. Mixing these together can create incredible effects.

In addition, using CSS transforms is more performant in animations than adjusting other attributes, such as top and left. If you want your animations to be fast, use CSS transforms!

Suggested Learning

• Examples:
  • Image Gallery
  • 3D Sphere
  • Butterfly - click the example link
  • CSS 3D FPS - Seriously - no JS. Just HTML and CSS.
• Guide to CSS Transforms, with examples
• More in-depth guide

Requirements

• Fork this Codepen: CSS Transforms Assignment
• Your task is simple: Create a CSS Cube. Bonus points if you animate it rotating.
• Share your pen on the #requirements Discord channel to show you have passed this requirement off.

Extra Learning

• MDN Documentation

This list is by no means complete. Feel free to add an issue or put in a pull request to update it.