CSS Mouse Tracking 3D Tilting Card

33,444
15
Published 2022-08-04
While there are handy JS libraries that make this easy, we can do it with CSS only! It is a little hacky, but it’s a fun exercise in selectors, plus we can simplify things a little with the :has() selector. Support isn’t great there yet, so we’ll start without it, then look quickly at how it simplifies things.

🔗 Links
✅ The original version: codepen.io/kevinpowell/pen/rNdmgKO
✅ The :has() version: codepen.io/kevinpowell/pen/YzaxYNg
✅ 3D flipping card:    • Create a 3D flipping animation with H...  
✅ Join the Discord! discord.gg/nTYCvrK
✅ nth-master that I mentioned in the video is no longer around ☹️ - I'll be working on some content around this in the not too distant future though!


⌚ Timestamps
00:00 - Introduction
1:04 - writing the HTML
2:52 - styling the content itself
3:55 - setting up the card wrapper
7:24 - setting up the mouse position trackers
14:25 - adding the hover
24:26 - cleaning things up and making it look better
26:14 - using :has()

#css

--

Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK

Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: www.patreon.com/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 YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: twitter.com/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 a

All Comments (21)
  • @marl3x
    That is such a simple solution that I would have never been able to come up with it. Nice.
  • @reegiromar
    I swear to God kevin you made me fallen in love with CSS a long ago and still am the big listener to you man 😍 thank you for giving us the best time spending with CSS 👏 I love you to the God man ♥️😍 Keep going
  • Hello Kevin i am one of your Students. And I just want to Thank you from the Deepest part of my heart for all this Juicy CSS and Html Knowledge. YOU ARE MY FAVOURITE MENTOR for frontend. And You Successfully made me FALL IN LOVE WITH CSS. I Just LOVE all Your Videos, the way you teach makes everything Really easy to Understand.i Just wanna say I Love you(as a person). And you helped me a lot in my life, i am still learning a lot from you, and I hope you keep doing this.I REALLY REALLY APPRECIATE All The knowledge you are sharing with us. Thank you very much.
  • @marklnz
    I mean, you can do everything "without Javascript". If I'm doing "no-js" web stuff personally, I like to build with WASM, for example. However, the fun part of watching these videos is seeing a CSS wizard do it with just CSS which is a MUCH bigger deal than just doing it "without javascript". Nice job as always, Kevin.
  • @simenhagen86
    And here i struggle with making an regular card look good😅 this was awsome
  • @zarkasias
    Very cool!! I always learn new css tricks when watching your videos!!
  • @pavanrao2965
    Kevin back with interesting stuff as always 😍
  • Great tutorial, I'm looking into posting HTML/CSS tutorials on my channel too but its still quite far in my schedule. In the meantime, little tutorials like this one are great to remind me of all the possibilities you have with just CSS. Can't wait for the next tutorial!
  • @theman7050
    This is a brilliant use of Grid, my man ✌🏽😁
  • @KOBE42__
    Neat little trick and really liked your logic behind making it work using pure CSS. I need to put all of this stuff into practice. While I absolutely love your tutorials, I’m finding it difficult to learn just by watching. I think I need to start building things with some of these more advanced CSS properties/selectors. Thank you Kevin
  • @Deadgray
    Haha, today I learned from this .something to turn into div in VSCode after so long using it, thanks 😀
  • @YurijVolkov
    Oh, I love clever stuff! It's indeed a simple solution but you have to crack your brain to come up with it) Thanks!!
  • Last night fell asleep watching ur vidoe and had a css dream I was trying to make a animated navigation bar in my dream 😄
  • u r awesome !!
  • @komakaze1
    Another great video Kevin. I found it tricky to follow along at home. Here's my minor nitpicks while debugging my code - You renamed a variable to --rotateX in the video, but in the codepen it's labelled --rotationX. Sometimes you reference Y before X, where consistently X before Y would help readability. You include a rotationZ but don't use/need it. I couldn't get the sections of the grid to change colour on hover until i'd found i'd used a different class name for tilting-card-body.