Perspective

Back

Inspired by Will Phan, who was in turn inspired by Adaline’s website. I respect vanilla CSS as much as the next guy, but Tailwind is just so cracked, powerful, and convenient that I had to try and recreate this effect entirely with utility classes. Hover over the component below and see what happens.

The Two-headed Calf


Tomorrow when the farm boys find this

freak of nature, they will wrap his body

in newspaper and carry him to the museum.


But tonight he is alive and in the north

field with his mother. It is a perfect

summer evening: the moon rising over

the orchard, the wind in the grass.

And as he stares into the sky, there

are twice as many stars as usual.


— Laura Gilpin

Hopefully that poem was as profound to you as it was to me. I’ve provided an example implementation for you below, so you can use this effect for yourself (perhaps you can use it with other wonderful poems):

import { cn } from "@/lib/utils"

<div className="group perspective-distant">
  <div className="transform-3d">
    <div
      className={cn(
        "transform-[rotateX(0deg)_rotateY(0deg)]",
        "group-hover:transform-[rotateX(14deg)_rotateY(-30deg)]",
        "transition-transform duration-500",
        "ease-[cubic-bezier(0.59,0.14,0.35,0.99)]",
        "delay-400 group-hover:delay-0 space-y-0.5!"
      )}
    >
      <span
        className={cn(
          "relative z-10 inline-block rounded-md px-1.5 py-1",
          "text-white bg-[#b2d7ff]",
          "transition-[translate,box-shadow] duration-400 group-hover:duration-700",
          "ease-[cubic-bezier(0.59,0.14,0.35,0.99)]",
          "group-hover:-translate-x-2 group-hover:-translate-y-1.5",
          "group-hover:shadow-[2px_1.5px_0_0.75px_rgba(100,180,255,0.8),8px_4px_4px_0_rgba(100,180,255,0.3),0_4px_8px_rgba(0,0,0,0.12)]"
        )}
      >
        Your text here...
      </span>
    </div>
  </div>
</div>