22 lines
1.0 KiB
Markdown
22 lines
1.0 KiB
Markdown
|
# ➰📃 Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0
|
||
|
|
_A Pen created at CodePen.io. Original URL: [https://codepen.io/team/keyframers/pen/YzKjoev](https://codepen.io/team/keyframers/pen/YzKjoev).
|
||
|
|
|
||
|
|
David Khourshid and Stephen Shaw recreate a beautiful 3D isometric flying paper animation using CSS only!
|
||
|
|
|
||
|
|
* ⏰ Streamed live on September 16, 2019 at https://twitch.tv/keyframers
|
||
|
|
* 💡 Inspiration: https://dribbble.com/shots/7127901-Dialog/attachments/131339
|
||
|
|
* 📺 Video: https://youtu.be/Fdq95qVG7F4
|
||
|
|
* 💻 Code: https://cdpn.io/pen/YzKjoev
|
||
|
|
|
||
|
|
Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!
|
||
|
|
|
||
|
|
* Like & subscribe on YouTube at https://youtube.com/keyframers
|
||
|
|
* Follow & tweet us at https://twitter.com/keyframers.
|
||
|
|
* Join the live streams & subscribe on Twitch http://twitch.tv/keyframers
|
||
|
|
* Support us on Patreon at https://patreon.com/keyframers
|
||
|
|
|
||
|
|
Topics covered:
|
||
|
|
|
||
|
|
* CSS Variables
|
||
|
|
* Segments for creating smooth curves
|
||
|
|
* 3D CSS transforms and 3D transform-origin
|