Inicio » Blog » CSS
Card 3d flip básico con perspective

Card 3d flip básico con perspective

Card Efecto FLIP 3D

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

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

VER DEMO

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
        }

 

Descarga código fuente 81

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 3808 veces

Codea App
Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022