AI CSS Animations

Social Icons Flip Hover

Rounded social tiles that spin a full turn on the Y axis when hovered and land in solid color. The color swaps while the tile is edge-on, so the change is hidden by the turn.

Also known as: social icons rotate 360 on hover, flip icon animation css, spinning social buttons.

HTML

<ul class="hfx-social-icons-flip">
  <li><a class="hfx-social-icons-flip-link" href="#" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7 8.5 6 8.5-6"/></svg></a></li>
  <li><a class="hfx-social-icons-flip-link" href="#" aria-label="Share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg></a></li>
  <li><a class="hfx-social-icons-flip-link" href="#" aria-label="Chat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.4 8.4 0 0 1-12.2 7.5L3 21l2-5.3A8.5 8.5 0 1 1 21 11.5Z"/></svg></a></li>
  <li><a class="hfx-social-icons-flip-link" href="#" aria-label="Website"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9.5"/><path d="M2.5 12h19M12 2.5c2.6 2.6 3.8 5.8 3.8 9.5s-1.2 6.9-3.8 9.5c-2.6-2.6-3.8-5.8-3.8-9.5s1.2-6.9 3.8-9.5Z"/></svg></a></li>
</ul>

CSS

.hfx-social-icons-flip {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-social-icons-flip-link {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transform: perspective(12em) rotateY(0deg);
  transition:
    transform 0.7s cubic-bezier(0.45, 0, 0.2, 1),
    background-color 0.1s linear 0.16s,
    color 0.1s linear 0.16s;
}
.hfx-social-icons-flip-link svg {
  width: 1.3em;
  height: 1.3em;
}
.hfx-social-icons-flip-link:is(:hover, :focus-visible) {
  transform: perspective(12em) rotateY(360deg);
  background: var(--c);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .hfx-social-icons-flip, .hfx-social-icons-flip *, .hfx-social-icons-flip::before, .hfx-social-icons-flip::after, .hfx-social-icons-flip *::before, .hfx-social-icons-flip *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --hfx-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --hfx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar hover effects

Profile Card Social Icons Hover
Social Icons Fill Up Hover
Bouncing Social Icons Hover
Social Icons with Tooltip Hover