Inicio » Blog » HTML + CSS

2 enero, 2021

Card 3d flip básico con perspective

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

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 5942 veces

Descarga el código fuente HTML + CSS

Recurso descargado 265 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023