Card 3d flip básico con perspetive

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

VIDEO ¿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

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
        }

 

¿Quieres descargar el código fuente Card 3d flip básico con perspetive?
...por favor suscríbete gratuitamente para descargarlo

CSS

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 136 veces | Publicado hace 2 semanas

Curso Android Desarrollo App Restaurante

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021