Card 3d flip básico con perspective

El efecto en mención es muy atractivo en el diseño de una página web donde se desea mostrar tarjetas 3d que al reaccionar al hover se volteen y muestren el contenido anterior.

Veamos entonces como  diseñar en html y css

Card animado en 3D usando CSS

Código html

 <div class="container">
        <div class="card front">
            <h1>FRONT</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt veniam perferendis, quisquam dolorum suscipit cupiditate nam saepe fugit quasi reprehenderit quod? Cupiditate, harum quae eius libero porro unde accusantium repellat?</p>
        </div>
        <div class="card back">
            <h1>BACK</h1>
            <a href="" class="btn">BOTÓN</a>
        </div>
    </div>

Código CSS

        body{
            background: linear-gradient(red, orange);
            height: 100vh;
            display: grid;
            place-items: center;
        }
        .container{
            position: relative;
            width: 300px;
            height: 400px;
            perspective: 1000px;
            transform-style: preserve-3d;

        }
        .card{
            position: absolute;
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            border-left: rgba(255, 255, 255, 0.342) 1px solid;
            border-top: rgba(255, 255, 255, 0.342) 1px solid;
            border-radius: 20px;
            backdrop-filter: blur(30px);
            box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
            color: white;
            backface-visibility: hidden;
            font-family: Arial, Helvetica, sans-serif;
            transform: rotateY(0deg);
            transform-style: preserve-3d;
            transition: 2.5s cubic-bezier(0.4, 0.2, 0.2, 1);
            
        }
        .front{
            background: rgba(255, 255, 255, 0.109);
            transform: rotateY(0deg);
            padding: 10px;


        }
        .back{
            background: rgba(255, 255, 255, 0.109);
            transform: rotateY(180deg);
            padding: 10px;
        }
        .container:hover > .front{
            transform: rotateY(-180deg);
        }
        .container:hover > .back{
            transform: rotateY(0deg);
        }
        .btn{
            border: 1px solid white;
            background: rgba(255, 255, 255, 0.21);
            padding: 10px 20px;
            border-radius: 20px;
            text-decoration: none;
            color: white;
            transition: all 0.5s;
        }
        .btn:hover{
            padding: 10px 40px;
            background: white;
            color:black
        }

Leido 6762 veces | 4 usuarios