Card 3d flip básico con perspective

¿Cómo diseñar card 3d flip con CSS? efecto flip card

Video Card Efecto FLIP 3D

Para ello declaramos un contenedor con dos caras con diferente contenido, para lograr las transiciones nos ayudamos del selector hover del container

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
        }

 

Para descargar el recurso de forma gratuita { crea una cuenta } gratis .

Descarga código fuente

ENTRAR PARA DESCARGAR 4

Redactado por: , Leido 3089 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021