Coyote Labby Coyote Concept

Small JS · perspective · transform

3D Tilt

The surface tilts under the cursor with a moving highlight, like holding a card up to the light.

Class
.CCTilt
Weight
1.4 KB
Needs
CSS + a few lines of JS
Best for
Product cards, portfolio tiles, pricing

Tune it

Every snippet on this page follows these settings.

How 3D Tilt works

  1. Script turns the cursor's position into two small rotations, around the X and Y axes.
  2. transform: perspective() rotateX() rotateY() tips the element towards you.
  3. A soft highlight on ::after follows the cursor, so the light seems to catch the surface.
  4. On leave, a smooth transition lays it flat again.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCTilt">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

3D Tilt on card, button.

More ways to use it

The same class on image card, modal, badge.

Pairs well with

Avoid on the same element Moonrise (::after), Border Beam (::after), Glare Sweep (::after), Spotlight (::after), Magnetic (transform).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • Content stays upright and readable; the tilt is at most a few degrees.
  • Disabled under reduced motion.

Performance

  • 1.4 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about 3D Tilt

How do I add 3D Tilt to a button?

Add the class CCTilt next to CCButton, inside an element with the CCTheme class, then include the 3D Tilt CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does 3D Tilt need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support 3D Tilt?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is 3D Tilt accessible?

Content stays upright and readable; the tilt is at most a few degrees. Disabled under reduced motion.