NewCSS + small JS · 3D transforms · backface-visibility

Flip

The label turns over in 3D, like a sign flipping on its hinge, to show its other side in the accent colour.

A free 3D text flip effect in HTML and CSS (with a few lines of JavaScript). Also known as flip text hover, rotating text button, flip card text or text turnover.

Class: .CCFlip
Weight: 1.5 KB
Needs: CSS + a few lines of JS
Best for: Departure-board brands, menus, tabs

Tune it

Every snippet on this page follows these settings.

How the Flip hover effect works

Script puts each label on the front and back of a small 3D box.
The back face is turned 90 degrees down, so it's hidden until the box turns.
On hover the box rotates 90 degrees on its X axis, with a springy overshoot.

Add it to your site

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

Core components

Flip on button, tabs, dropdown, card.

More ways to use it

The same class on headline, nav bar, badge.

The Flip code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS

.CCFlip .CCFlip-in {
  display: inline-grid;
  transform-style: preserve-3d;
  transform: perspective(400px);
  transition: transform calc(.55s / var(--cc-speed)) cubic-bezier(.4, 1.6, .5, 1);
}
.CCFlip .CCFlip-in > span { grid-area: 1 / 1; backface-visibility: hidden; transform: translateZ(.55em); }
.CCFlip .CCFlip-in > span + span { color: var(--cc-accent); transform: rotateX(-90deg) translateZ(.55em); }
.CCFlip:is(:hover, :focus-visible, :focus-within) .CCFlip-in { transform: perspective(400px) rotateX(90deg); }
/* on an accent-filled label (solid button, the selected tab) the back keeps the label's own colour */
.CCFlip:is(.CCButton--solid, .CCBadge) .CCFlip-in > span + span,
.CCFlip [aria-selected="true"] .CCFlip-in > span + span { color: inherit; }
@media (prefers-reduced-motion: reduce) { .CCFlip .CCFlip-in { transition: none; } }

Show the JavaScript

document.querySelectorAll(".CCFlip").forEach(function (el) {
  if (el.dataset.ccFlip) return; el.dataset.ccFlip = 1;
  var targets = el.matches("button, h1, h2, h3, .CCBadge") ? [el] : [].slice.call(el.querySelectorAll("h3, a, [role=tab]"));
  targets.forEach(function (t) {
    [].slice.call(t.childNodes).forEach(function (node) {
      if (node.nodeType !== 3 || !node.textContent.trim()) return;
      var text = node.textContent.trim(), box = document.createElement("span"), front = document.createElement("span"), back = document.createElement("span");
      box.className = "CCFlip-in"; front.textContent = back.textContent = text; back.setAttribute("aria-hidden", "true");
      box.appendChild(front); box.appendChild(back); t.replaceChild(box, node);
    });
  });
});

Pairs well with

Avoid on the same element Howl Glitch (text), Text Scramble (text), Letter Wave (text), Text Roll (text), Squiggle (text), Focus Blur (text).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

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

Accessibility

The back face is hidden from screen readers, so the label is read once.
Plays on keyboard focus too.
Swaps without turning under reduced motion.

Performance

1.5 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 Flip

What is a 3D text flip effect?

The label turns over in 3D, like a sign flipping on its hinge, to show its other side in the accent colour. Flip is a free 3D text flip effect, also known as flip text hover or rotating text button, that works on buttons, tab bars, dropdowns, cards and more.

How do you make a 3D text flip effect in CSS?

Script puts each label on the front and back of a small 3D box. The back face is turned 90 degrees down, so it's hidden until the box turns. On hover the box rotates 90 degrees on its X axis, with a springy overshoot.

How do I add Flip to a button?

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

Does Flip need JavaScript?

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

Which browsers support Flip?

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

Is Flip accessible?

The back face is hidden from screen readers, so the label is read once. Plays on keyboard focus too. Swaps without turning under reduced motion.

Can I use Flip in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCFlip to a button or block, and paste the JavaScript into the footer code area.

Is Flip free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.