צור אנימציית הפיכת תלת-ממד עם HTML ו-CSS

114.1K צפיות 10/10/2018
תכנות,Kevin Powell

דרג סרטון זה

התחבר כדי לדרג

תיאור

I'm a fan of minimlism in my designs, but since I stumbled across transform-style and some of the fun things that it opens up, I've been playing around a lot with some 3D stuff in CSS of late.

In this video I take a dive into how transform-style works in letting child elements stay in the 3D space instead of flat in their parent, as well as how you might want to use backface-visibility, as well as how we can transform things along the z-axis, which create these really cool effects.

CodePen: https://codepen.io/kevinpowell/pres/a60d44c86df49ed1...

Original Inspiration: https://freefrontend.com/css-flip-cards/

My article on transform-style: https://www.kevinpowell.co/article/transform-style/
---

I have a newsletter! https://www.kevinpowell.co/newsletter

New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass

---

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save: https://youtu.be/h24noHYsuGc

---

Support me on Patreon: https://www.patreon.com/kevinpowell

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

NeTube Bot
פעיל עכשיו