CSS Animation Weekly #70 - Breathe, Animating a 3D phone and loads more

November 27, 2017

It's Cyber Monday! This week we're recreating the gorgeous "Breathe" animation from Apple Watch, and in a related theme taking a look back at how to use CSS to create an animated 3D phone.

Oh and guess what, you can get my course for just $10 today! 🏃‍♂️

Articles

A walkthrough of recreating the lovely "breathe" animation from Apple Watch

One from the archives - see how to create a rotating 3D iPhone 4S using CSS! Yep, the phone model fairly dates it but the principles still apply.

Featured

There's never been a better chance to get lifetime access to this awesome video course. Learn how to bring a website to life, step by step - for just $10. That's a saving of 93%. 

Learn how to build amazing animated hero headers, beautiful hover events, captivating scroll animations, carousels, responsive animation and more with loads of practical examples to download.

If you haven't jumped on this deal yet, now's the time. This offer includes full lifetime access to all videos, including all future videos, tutorials and downloads. Get it now.

Inspiration

Maybe my favourite Codevember yet. Interaction, audio, this has it all. Press and hold the avocado! 🥑

If you've ever wondered how to create a 3D rotating cube using CSS, this is a great starting point. Fork this example and see what you can create!

Some more awesomeness from Codevember. Best seen in Chrome, this is a 3D rotating earth 🌎

Right on! Check out this cute and happy thumbs up person

Nice use of a 3D rotation on this hexagon grid - complete with animated Gifs!

These discs have a lovely sheen effect. Simple, but very effective 🎵

A lovely (and maybe useful?) set of simple CSS hover effects

Amazing bit of WebGL here from Adult Swim. Grab and stretch a Morty!

Lastly...

After today the price goes back up to $140.