Cube Turn Effect

Original · free

Image face turns like a cube to a second face on hover.

byWeb InnoventixReact + Tailwind

cubeturnimageeffect

Open

Copy prompt gives Claude Code, Cursor or v0 a ready-to-paste prompt that recreates this exact component.

npx shadcn@latest add https://webinnoventix.com/r/imgfx-cube-turn.json

Open

imgfx-cube-turn.tsx

"use client";

export default function ImgfxCubeTurn() {
  return (
    <section className="relative w-full overflow-hidden bg-white px-6 py-20 dark:bg-neutral-950 sm:py-28">
      <style>{`
        .imgfx-cube-turn-scene {
          --imgfx-cube-turn-w: 320px;
          --imgfx-cube-turn-h: 400px;
          --imgfx-cube-turn-half: 160px;
          width: var(--imgfx-cube-turn-w);
          height: var(--imgfx-cube-turn-h);
          perspective: 1400px;
        }
        .imgfx-cube-turn-cube {
          position: relative;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          transform: rotateY(0deg);
          transition: transform 720ms cubic-bezier(0.22, 0.68, 0.16, 1);
        }
        .imgfx-cube-turn-scene:hover .imgfx-cube-turn-cube,
        .imgfx-cube-turn-scene:focus-visible .imgfx-cube-turn-cube {
          transform: rotateY(-90deg);
        }
        .imgfx-cube-turn-face {
          position: absolute;
          inset: 0;
          overflow: hidden;
          border-radius: 1rem;
          backface-visibility: hidden;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
        }
        .imgfx-cube-turn-face img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .imgfx-cube-turn-front {
          transform: rotateY(0deg) translateZ(var(--imgfx-cube-turn-half));
        }
        .imgfx-cube-turn-side {
          transform: rotateY(90deg) translateZ(var(--imgfx-cube-turn-half));
        }
        .imgfx-cube-turn-label {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          padding: 1rem 1.1rem;
          font-size: 0.8rem;
          font-weight: 600;
          letter-spacing: 0.02em;
          color: #fff;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
        }
        @media (prefers-reduced-motion: reduce) {
          .imgfx-cube-turn-cube {
            transition: none;
          }
        }
      `}</style>

      <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
        <span className="text-xs font-semibold uppercase tracking-[0.22em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </span>
        <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Cube Turn
        </h2>
        <p className="mt-3 max-w-md text-sm text-neutral-600 dark:text-neutral-400">
          One photo swings away on a 3D axis and a second face turns into view,
          like rotating a solid cube.
        </p>
      </div>

      <div className="mt-14 flex justify-center">
        <div
          className="imgfx-cube-turn-scene rounded-2xl outline-none ring-offset-4 ring-offset-white transition-shadow focus-visible:ring-2 focus-visible:ring-indigo-500 dark:ring-offset-neutral-950"
          tabIndex={0}
          role="img"
          aria-label="Cube-turn effect: an aerial coastline photo rotates to reveal a mountain lake photo. Hover or focus to rotate."
        >
          <div className="imgfx-cube-turn-cube">
            <div className="imgfx-cube-turn-face imgfx-cube-turn-front">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/img/gallery/g08.webp"
                alt="Aerial view of a turquoise coastline meeting pale sand"
                loading="lazy"
                draggable={false}
              />
              <span className="imgfx-cube-turn-label">Front face</span>
            </div>
            <div className="imgfx-cube-turn-face imgfx-cube-turn-side">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/img/gallery/g21.webp"
                alt="A still mountain lake mirroring the peaks above it"
                loading="lazy"
                draggable={false}
              />
              <span className="imgfx-cube-turn-label">Side face</span>
            </div>
          </div>
        </div>
      </div>

      <p className="mt-10 text-center text-xs font-medium uppercase tracking-[0.18em] text-neutral-400 dark:text-neutral-500">
        Hover or focus to rotate
      </p>
    </section>
  );
}