* Click any section to edit its properties
* Hover your cursor over each property to view a tip

by Evyatar Amitay (@evyatron)
Clear
What is this??

CSS Animations and Transform Origin

This is a test page I created to test out transform origin in CSS,
and how it behaves when animating and nesting lots of elements.

OK, but... what do I do?

Granted, this isn't the best UI (since I'm a programmer and all that).
So here are a few things of note to get you started:

  1. Change an element- Select one of the rectangles in the middle of the screen (simply by clicking it), and edit its properties in the form to the top left.
  2. Create more elements- Select a rectangle, and hit the "Add Child" button. This will add a new rectangle inside the selected one.
  3. Duplication- Select a rectangle, and hit the "Duplicate" button. This will create a new rectangle with the same settings of the selected one.
  4. Sharing- Hit the "Get Link" button and wait for the link to be generated.
    Once it's done simply copy-paste it and share away!

Examples

Here are a few examples of things I've created with this tool.
These are rather complicated, but they show perfectly the level of complication that can be achieved with just arranging several rectangles and their axis points

  1. Crazy Person
  2. Fractal Windmill
  3. Solar System

* Please note that some of these are CPU-intensive and might slow down your browser