css Snowflakes & Pinwheels

SNOWFLAKE 3

SNOWFLAKE 4

SNOWFLAKE 5

SNOWFLAKE 6

SNOWFLAKE 7

SNOWFLAKE 8

SNOWFLAKE 9

SNOWFLAKE 10

PINWHEEL 3

PINWHEEL 4

PINWHEEL 5

PINWHEEL 6

PINWHEEL 7

PINWHEEL 8

PINWHEEL 9

PINWHEEL 10

BUILDING ON THE STARS INTO POLYGONS demo, we explore here the effects of playing with the transform-origin property, as well as changing the width and height of the divs. The possibilities are endless, so you should play around with the values yourself.

Recall that to make regular stars and polygons we used transform-origin: 50% 100%.

Here we are using transform-origin: [>100%] 50%.

Note: This demo uses the rotation.css stylesheet.