Todos os componentes

Card Flip Hover

Card Flip Hover é um componente de cartão para React e Tailwind CSS, da biblioteca Eldora UI, com licença MIT. Copia e cola no teu projeto.

Eldora UI MIT cards

O que é

Card Flip Hover é um componente de cartão para React e Tailwind CSS, da biblioteca Eldora UI, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Precisa de

npm i react

Licença

Este componente vem de Eldora UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Card Flip Hover

registry/eldoraui/card-flip-hover.tsx
"use client"

import React, { useState } from "react"

interface CardFlipHoverProps {
  imageUrl: string
}

export const CardFlipHover = ({ imageUrl }: CardFlipHoverProps) => {
  const [isFlipped, setIsFlipped] = useState(false)

  const handleHover = () => {
    if (!isFlipped) {
      setIsFlipped(true)
      setTimeout(() => setIsFlipped(false), 700)
    }
  }

  return (
    <div className="h-60 w-44 [perspective:1000px]" onMouseEnter={handleHover}>
      <div
        className={`relative h-full w-full transition-all duration-700 [transform-style:preserve-3d] ${
          isFlipped
            ? "[transform:rotateY(180deg)_translateY(-40px)]"
            : "[transform:rotateY(0deg)_translateY(0px)]"
        }`}
      >
        {/* Front Side */}
        <div className="absolute h-full w-full overflow-hidden rounded-xl shadow-xl [backface-visibility:hidden]">
          <img
            src={imageUrl}
            alt="Front"
            className="h-full w-full object-cover"
          />
        </div>

        {/* Back Side */}
        <div className="absolute flex h-full w-full [transform:rotateY(180deg)] items-center justify-center overflow-hidden rounded-xl bg-cyan-600 text-xl font-bold text-white shadow-xl [backface-visibility:hidden]">
          <img
            src={imageUrl}
            alt="Back"
            className="h-full w-full object-cover"
          />
        </div>
      </div>
    </div>
  )
}

Componentes parecidos