Prince - Sign 'O' the times - CSS only!

A while ago, @codepo8 tweeted the following:

Challenge. Prince's amazing music video of "Sign 'O' the times" could be done purely in CSS - vimeo.com/31651285

— Christian Heilmann(@codepo8) May 11, 2012
My first thought was that he was serious about it and I could see where he was coming from, so I decided that it would be an interesting way to learn more about CSS3 animations etc

I have managed to get the first minute of the video in CSS3 only - displayed below with the original video, just press play and enjoy.

You can contact me on twitter: @lucadeangeli

DISCLAIMER

Works in Firefox only I was too lazy to double-prefix for webkit too - and perhaps scaled and rotated elements render better in Firefox, as far as I could see.

The code sucks. It's in no way meant to be optimized or to follow any best practices etc - I did this just for fun, mostly in my spare time!

It's not perfectly accurate. You know.

If anyone feels willing enough to improve it / continue its development, you can clone the gitHub repo.

Resources

Some pages that I've used to learn more about css animations:

...And if you want to know more about the song: Sign O the times review on BBC Music

o
yeah
In
France
a
skinny
Man
died
of
a
big
Disease
with
a
little
Name
By
chance
his
Girl
Friend
came
across
a
Needle
and
soon
She
did
the
Same
At
Home
there
are
seven
teen
year
old
Boys
and
their
Idea
of
Fun
is
being
in
a
Gang
called
The Disciples
High
on
Crack
and
totin'
a
machine
Gun