Can I copy this cool effect with CSS?

I recently came across a very fun-looking CodePen by Gayane Gasparyan, and I wanted to see if I could recreate the effect.
🔗 Links
✅ The codepen that inspired this: codepen.io/gayane-gasparyan/d...
✅ My finished code: codepen.io/kevinpowell/pen/jO...
✅ Other videos in this series: • Can I build it?
⌚ Timestamps
00:00 - Introduction
00:38 - What I’m starting with
01:18 - The HTML
03:23 - Starting the CSS
05:55 - Adding the tilt
07:56 - Adding the shadow under the card
14:32 - Preventing the shadow from rotating
19:26 - Adding the vignette on hover
22:40 - Adding the logo
30:30 - Adding the second image on hover
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@ichiroutakashima4503]

12:58 Words spoken by a true developer. 😂 "I don't try and do things perfectly, I try and get them to work..."

[@chhavimanichoubey9437]

that's my approach since the beginning of my coding journey.

[@viralclickb8]

@@chhavimanichoubey9437 same... one day something will work.... one day.

[@geelemo]

Yh prototyping... small sauce before you pour it in the big soup

[@mraloush8959]

thats the oppsite of a true dev. also hes not doing dev work. its css, its not even coding

[@viralclickb8]

@@mraloush8959 ....................... cuz js, c#, and c++ etc is so much more complicated? LOL spoken like someone who doesnt know how to code, can tell you right now... make a functional webapp with lets say js, html and css, css will take the most time to get right. not including the backend dev

[@vasyaqwe2087]

this might be just the coolest thing i've seen done with css. Great job Kevin

[@rj3965]

It always amazes me. You provide not only complex answers in a simple fashion but mostly I am surprised that someone is providing such high quality content and knowledge for free on KZbin while sharing most importantly the whole thought process on how one should approach a certain issue. You sir are a legend and have made my life very very easy. As a backend developer trying to understand UI and UX it was getting very frustrating before coming across your videos and here I am now sharing your content and suggesting your channel to every one going through same frustration. Can't thank you enough but thanks.

[@ethansc]

Super cool effect and I love these long-form videos where you’re going through the whole process showing the pivots, please keep them coming!

[@aviralvikram9431]

Amazing, i love how you always bring something new for us to enjoy with css.

[@henson_prod]

I just love how you solve and figure things out as you go.

[@adryeeel]

Love this videos building from scratch! Please, do more. I learn a lot.

[@kushagragour]

Enjoyed this walkthrough! Great stuff as always, Kevin! ^_^

[@deltaromeo8207]

This was really fun to create. I made a Zelda one with Link popping out. Thank you for doing the tutorial.

[@GodsZoldier]

i honestly find your thought process comforting

[@ABanksy]

So awesome man. I like that you kept the googling in the video! I think a lot of new people assume you have to remember and recall every property with ease or you arent doing it right.

[@codytownley5236]

Love it! Truly enjoy the thought process!

[@Ayydos]

This was amazing, more of these please!

[@aliaskhar.11]

This is absolutely perfect. Keep going!

[@MaralTheGameGirl]

This is one of the coolest effects I've seen

[@magoxxii]

This is super interesting! I've been learning about attributes and properties I never even knew existed. Around halfway through the video, I might have lost my way a bit, but I'm genuinely excited to discover all the amazing possibilities that CSS offers. I would love to see more of this stuff with a tutorial touch to learn how to use them effectively.

[@ThugLifeModafocah]

the skill is unbelivable. Thank you and congratulations.

[@TheRealFreekBos]

I am totally new at css and even though I don't understand that much it really showed me the power of css. Thank you for that! I also really love the trial&error type of video you made! Perfect...

[@LabelledManiacs]

That was really cool, you have really helped me improve my css skills :)

[@EldonElledge]

I suck at UI / CSS. This was fantastic and I learn so much from this. Thank you.

[@spartiata71]

Man, so intense! great job.

[@hygorlima7660]

amazing effect! thank you so much to explain it for us. Its always helps!

[@flibben]

Loved this style of video!

[@NickCombs]

Nicely done! I think for the shadow you could try tying the blur amount to --timing as well. As the bottom of the card rotates up, it would get further from the background and the shadow would become more diffuse.

[@octothorpe12]

That was a heck of a lot of fun!

[@blu3tan]

omg this video was a wonderful journey... awesome, please keep going

[@securefolder4548]

Was waiting for a video from u ❤❤

[@user-qy9ty6go9j]

This is one of THE BEST PROGRAMING videos are exist on this platform. Thank you from the bottom of my heart

[@Drazyhaze]

I enjoy your like nervous/half laughs where you're unsure if your choice is correct lol. Gives me a good chuckle cause I heavily relate. Nice video.

[@markclynch]

absolutely love this style, figure it out, of video! Keep em coming!

[@kylevandeusen]

Love this style of video!

[@_kaverna]

I like videos like this where you go through your thought process xD

[@user-dn7yl7ms1u]

Just at 7:07 you know this is some magic stuff going on. Thank you for your awesomeness.

[@olumorsotnas]

Amazing job!

[@vincentmbwende9131]

Totally love your work

[@marquisegbunike5773]

awesome try there. To me, you got it right. you're extremely good in CSS breaking it and moulding it back.

[@islamali9818]

16:14 Man, I like the fact that you kept improvising all the time, Cheers from Egypt.

[@TheRalic]

Just saw the intro and OMG can't wait to get the time to try this out 😮😮

[@T25de]

Amazing video Kevin

[@matejlaskomulej]

These are my favourite videos of yours

[@nikolaykyurchiyski7523]

thanks for the inspiration, Kevin

[@chhavimanichoubey9437]

This helped me a lot to understand that I need to play with 3d effects more to make my site more awesome but with performance as well

[@mehulparekh619]

I used to think I am good at css. But after watching your several videos, I am definitely not a good one. 😂 But thanks, I am learning a lot from your channel !

[@AabirKashif]

This is very cool!

[@vinsmokesanji7629]

amazing man, gj

[@JunieVM]

I’m a beginner so this is out of my league but you inspire me a lot. Thanks Kevin.

[@craftwithfatima4146]

You made the internet awesome kev 🎉🎉

[@renedperez]

Love the content!

[@the-secrettutorials]

I was able to follow your tutorial with Webflow. Thanks!

[@josechavez9428]

Amazing!

[@millos0116]

Man I just enjoy watching you.❤

[@leanrasmussen8019]

This!!!! more of this !!!

[@marktabner]

I never knew that animating drop shadows was stupidly resource hungry! Learn something every day!

[@swissademar]

Hey Kevin, I'd love to see a video with you cleaning up the code for better understanding and also get to know your thinking proccess while doing so.

[@jorgegamboa5408]

that's some awesome css

[@everybot-it]

i think both ways have some merits... the way you got it to work has that "extra spacialness" and more control options, compared to the simple slide up version. And by playing with timings, you can create some pretty intricate 3D animations! 👍👍👍

[@MrMairu555]

Star Wars, CSS, and the return of smooshing! What more could I want?! 🤣🤣🤣

[@busarikazeem1995]

Beautiful 🎉

[@indracode7]

Amazing sir 👍

[@faridlachkar]

Thank you SO MUCH .. Really Awesome

[@sum1179]

Nice teacher, amazing!

[@Kaldrax]

Nice video, informative and interesting to watch. I think separating the front image and logo from the background to not rotate with it might be a lot easier than trying to fix the rotation with negative values though.

[@ozairabtahi]

Well done

[@BRODERVEVO]

I love this thumbnail face, gets me everytime

[@heiko3169]

Thats a pretty neat animation. thanks for explaining and showing how to do it. P.S. I like the unscripted content here

[@zahrahasti3723]

It was awesome.

[@SDRMusic777]

I was laughing through almost the whole thing but you taught me a lot today

[@victor25021983]

even the master keep learning. ❤

[@J90JAM]

Kev, the css MVP 🤙

[@RaveKev]

Such a great video! And i like how you love small hurdes (just as i do 🙂). There is allways a solution and it's great that you don't edit your moments of "whooops, i have no idea.. but let me think."

[@StevenDavisPhoto]

Looks pretty simple. I like when designers actually do cool stuff and challenge us CSS guys a bit ;)

[@MasayaShida]

yoda best CSS teacher

[@oncalldev]

Definiitely like the real-time thought approach to problem solving.

[@SamarHayatOfficial]

We want more videos something like this :)

[@PicSta]

For me, it looks like the logo itself isn't on the same layer as the card. Without taking a look at the demo code I would say he used 2 layers and the top layer with the logo makes the opposite animation, that it looks like it stays and then the same time it gets moved up. The Rider is a pseudo-element of the same layer as the logo, which only shows on hover and also floats up. Not easy to get what happens here, but I think I am close to the original demo.

[@RazahLP]

Wow!

[@RickertBrandsen]

surprised that i was watching you for years and was not actually subscribed.

[@keremardicli4013]

Amazing...

[@sovereignlivingsoul]

very nice

Greats job

[@JaGaNezhil]

Css master 😍😍🔥🙏🏼🙏🏼❤

[@poooooow]

It's crazy to me, if pros justify, just because they are not doing things instant perfect. Just because there are 0.01% haters, which will always hate. Great job, great inspiration!

[@KultuFact]

Please make more videos like this

[@salman.tanvir]

I think this style of unscripted video is awesome 👍

[@mentarioallen572]

crazy

[@Beastintheomlet]

Z-index not doing what I think it should is a weekly battle for me I swear.

[@PixelAnimeCoder]

it was something i haven't saw :)

[@WraShadow]

This looks awesome. I want to point something out though. Dont know if youre aware of this, forgot, or do it for a specific reason Im not aware. In this and a lot of your videos you tend to use a lot of z-index and most of them are unnecessary just by having the correct order. For instance when you use ::after pseudo-class for something you want beneath or have to use z-index to bring up a div that could just be on top by changing order to below the next div instead of above. Maybe something to explore? Otherwise, I learned about the perceptive having to be in a container, not that I use it much but good to learn in case.

[@MrOliver1444]

Amazing value. I learn so much. Also how to use some tools in wordpress the best way possible. Like using the sudo element for shadows to make it more performed

[@hologram4118]

🎉🎉🎉

[@DesignwithCracka]

Awesome video Kevin, I think preserve 3D wasn't necessary and ended up causing more complications.

[@KingTMK]

I believe the reason the z-indexes weren't working for the two images is because Yoda had an opacity of 0, which created a new stacking context

[@igu642]

❤❤

[@TheMetalMag]

U’re the boss

[@severgun]

Logo should slide more vertically staying perpendicular to camera. Also there should be delay or different speed between yoda and logo. So there would be feel that they are at 2 different layers.

[@joelpinnock8131]

Great stuff, can you show us the clean up version when you get a chance please.

[@muhammad.mohsen]

I think if only the background image rotated rather than the whole card, it would've been easier. Set the perspective on the card, then translate the shadow to -10z, the background is at 0z, and the logo + foreground to 10z What do you think? And awesome video, as always...the half hour literally flew by!!

[@thtasca]

Wow, great video, I think the strangeness of the card flip is because it is very tall, the examples are shorter maybe that is the difference you are commenting on or just some adjusts on perspective

[@user-hf5mp5ys6o]

You're good at what you do. Some creative feedback, i basically fast forwarded alot. Because i couldn't stand the trial and error since it got me confused thinkin that i could learn from this video. I think it would be more pleasing to watch if you learned the CSS beforehand. Then made the video step by step, titled: "I found this cool CSS effect and here's how to do it".

[@lost_and_finding]

All hail the css god