That 3D tilted card effect from the Tailwind CSS landing page. Built from scratch. No JavaScript. No animation library. Just Tailwind utility classes. The whole effect comes down to three things working together. First, perspective-distant on the wrapper sets up the 3D space. Without this, all the 3D transforms look completely flat. Second, transform-3d tells the browser to render children in that 3D space instead of collapsing them back to 2D. Third, the image gets rotate-x-30, -rotate-y-8, rotate-14 and translate-z-25 applied by default, which is what creates that tilted, lifted look. On hover, group-hover resets all of those back to zero with a smooth 300ms transition. The card just sits flat again. That is the entire effect. Four transform classes and a group-hover reset. #TailwindCSS #ReactJS #FrontendDevelopment #WebDev #CSS
More Relevant Posts
-
View Transitions are easy — until they’re not. The API gives you the primitives. But real work starts when you need control: timing, performance, navigation context. The 𝗩𝗶𝗲𝘄 𝗧𝗿𝗮𝗻𝘀𝗶𝘁𝗶𝗼𝗻𝘀 𝗧𝗼𝗼𝗹𝗸𝗶𝘁 by Bramus Van Damme is a solid set of utilities that covers what the native API leaves unresolved. The module I find most useful is Animations. It lets you extract VT animations, measure pseudo-element geometry, and optimize ::𝘷𝘪𝘦𝘸-𝘵𝘳𝘢𝘯𝘴𝘪𝘵𝘪𝘰𝘯-𝘨𝘳𝘰𝘶𝘱 animations — for example, switching from layout-based animation (width/height) to transform-based ones for better performance. A good companion to the Next.js 𝗩𝗶𝗲𝘄 𝗧𝗿𝗮𝗻𝘀𝗶𝘁𝗶𝗼𝗻𝘀 guide and the Vercel 𝗥𝗲𝗮𝗰𝘁 𝗩𝗶𝗲𝘄 𝗧𝗿𝗮𝗻𝘀𝗶𝘁𝗶𝗼𝗻𝘀 package if you’re building in that stack. • 𝗧𝗼𝗼𝗹𝗸𝗶𝘁 — https://lnkd.in/dWDSYaZB • 𝗚𝘂𝗶𝗱𝗲 — https://lnkd.in/dsAtbTdf • 𝗦𝗸𝗶𝗹𝗹 — https://lnkd.in/dWyMx9XG Have you tried using View Transitions in production yet? #Frontend #CSS #WebDevelopment #DesignEngineering #NextJS
To view or add a comment, sign in
-
🚀 Just built a smooth and modern animation using pure HTML & CSS! What makes this project interesting is the use of the anchor-name property, a newer CSS feature that opens up powerful possibilities for dynamic UI interactions and advanced animations. ✨ Key Highlights: Clean and lightweight (no JavaScript needed) Smooth interactive animation Leveraging modern CSS capabilities Exploring future-ready properties like anchor-name Always exciting to experiment with new CSS features and push the boundaries of what can be done without JS 💡 #HTML #CSS #WebDevelopment #Frontend #CSSAnimation #Learning #DeveloperJourney Sheryians Coding School
To view or add a comment, sign in
-
Tired of using multiple animation libraries for one website? Scroll reveal, parallax, counters, tickers — it should be simple. MotionFlow gives you everything in one clean lightweight javascript library. Less setup. Less conflicts. Better results. Try it: https://motionflow.dev #frontend #javascript #webdesign #motionflow
To view or add a comment, sign in
-
#Day11 of My MERN Stack Journey with Skill Shikshya Today’s class was all about making websites more interactive and dynamic with CSS animations and transitions Here’s what I learned: -CSS transition for smooth changes -CSS animation for more complex effects -@keyframes to control animation steps -transform for movement, rotation, scaling -CSS custom properties (variables) for cleaner and reusable code Andrealized that I’ve now covered most of the core CSS concepts! Still practicing and exploring more to get comfortable with everything. #Day11 #MERNStack #WebDevelopment #CSS #Animation #FrontendDevelopment #skillshikshya
To view or add a comment, sign in
-
CSS keeps getting more expressive — even in small details. One of those is the turn unit, which can be used with the rotate property. What is turn? The turn unit represents a full rotation: - 1turn = 360° - 0.5turn = 180° - 0.25turn = 90° It works anywhere an angle is expected, including rotate, transform, gradients, etc. turn is a small addition, but it improves readability and developer experience — especially in animations and circular layouts. #css #frontend #webdev #animation #ui #webdesign
To view or add a comment, sign in
-
-
𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗔𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 𝗚𝘂𝗶𝗱𝗲 You want to learn about JavaScript animation. JavaScript was first developed by Brendan Eich in 1995. It was used to add basic interactive elements to web pages. You can use JavaScript to create animations. Here are some key points: - JavaScript has a long history - It is used for web development - You can use it to create interactive web pages Source: https://lnkd.in/gHtVYsg4
To view or add a comment, sign in
-
🚀 TASK 4: Just Built a Dark Neon Gradient Animation UI! Cognifyz Technologies I’ve been exploring front-end development and recently created a simple yet visually engaging project using HTML, CSS, and JavaScript. ✨ Features: Smooth animated gradient background Dark neon (cyberpunk-inspired) theme Interactive button to pause/resume animation Clean and minimal UI This project helped me understand how CSS animations, keyframes, and transitions work together to create modern UI effects. 🎯 Still learning and experimenting — next step is building more interactive and responsive designs! Would love to hear your feedback or suggestions 🙌 #WebDevelopment #Frontend #CSS #JavaScript #Cognifyztech#CognifyzTechnologies.
To view or add a comment, sign in
-
A JavaScript library with zero releases is quietly running morph animations across 4000 projects flubber. 6900 stars. MIT license. Last real commit years ago. The author gave a talk in 2017 and moved on It does one thing well. Turns any 2D shape into any other 2D shape without the animation falling apart. Anyone who tried to morph an SVG triangle into a star with d3.transition() knows the failure mode — vertices teleport across the screen, the shape folds inside out, the whole thing looks like a bug report flubber fixes it with clever point-matching and hands back an interpolator function. Call it with a value from 0 to 1, get the in-between frame. The whole API fits on a screen Useful for data viz transitions, logo morphs, icon toggles, anything where one shape has to become another Correct math from 2017 is still correct math in 2026. Some libraries don't need updates. They need to still work
To view or add a comment, sign in
-
-
Just wrapped up an animated landing page for a client — and this one was a blast to build. 🎬 Heavy GSAP animations, smooth transitions, and a lot of attention to detail — all built with: → Next.js → Tailwind CSS → TypeScript → GSAP Animation at this level requires careful orchestration — timelines, scroll triggers, and making sure everything feels intentional rather than flashy for the sake of it. The goal? Make the first impression unforgettable. Check out the demo in the video 👇 #WebDevelopment #GSAP #NextJS #Frontend #WebAnimation #TailwindCSS #LandingPage
animated landing page
To view or add a comment, sign in
-
Inspired by Chris Tate’s work on json-render.dev (Vercel), I started thinking about how much friction still exists when building CSS animations. So I built KF → https://use-kf.vercel.app/ KF is a playground for CSS animations where you describe how you want an element to move in plain English and get clean keyframes back. The goal isn’t to replace libraries, but to remove friction at the moment of creation. You focus on the motion, not on tweaking percentages and transforms. KF generates ready-to-use outputs for CSS, Tailwind, and Framer, so you can plug animations directly into your workflow. Still early, but it’s already changing how I approach animations. Also, the model behind KF was heavily inspired by Emil Kowalski’s work: https://lnkd.in/d4Eu9Zsj Curious how others are approaching motion lately.
To view or add a comment, sign in
Explore related topics
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development