Scribd Logo
Upload

Welcome to Scribd!

  • Card 3d

    Uploaded by

    GIOVANNI EMILIO RAMIREZ
    2 views4 pages
    This document contains HTML and CSS code to create flip cards with 3D effects. The HTML defines a container for cards, each with a front and back side. The front displays an image and title while the back displays information and a button. The CSS provides styling for the cards, sides, and elements within using properties like transform, transition, and perspective to create the 3D flipping effect.

    Original Description:

    Original Title

    card-3d

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains HTML and CSS code to create flip cards with 3D effects. The HTML defines a container for cards, each with a front and back side. The front displays an image and title while the back displays information and a button. The CSS provides styling for the cards, sides, and elements within using properties like transform, transition, and perspective to create the 3D flipping effect.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views4 pages

    Card 3d

    Uploaded by

    GIOVANNI EMILIO RAMIREZ
    This document contains HTML and CSS code to create flip cards with 3D effects. The HTML defines a container for cards, each with a front and back side. The front displays an image and title while the back displays information and a button. The CSS provides styling for the cards, sides, and elements within using properties like transform, transition, and perspective to create the 3D flipping effect.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarjetas 3D con efecto flip</title>

    <link rel="stylesheet" href="css/estilos.css">


    </head>
    <body>
    <main>
    <div class="container__card">

    <div class="card__father">
    <div class="card">

    <div class="card__front" >


    <img src="../images/img1.jpg" alt="">
    <div class="bg"></div>
    <div class="body__card_front">
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Hic, omnis.</h1>
    </div>
    </div>
    <div class="card__back">
    <div class="body__card_back">
    <h1>Windows 10</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Pariatur ab quas recusandae voluptatum aliquid tempore animi corporis voluptas. Tempore
    neque iure necessitatibus voluptas nesciunt animi dolores incidunt delectus sapiente
    illum.</p>
    <input type="button" value="Leer Más">
    </div>
    </div>
    </div>
    </div>
    </div>
    </main>
    </body>
    </html>
    ESTILOS CSS

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    }
    body{
    background: #F1FAFF;
    }
    .container__card{
    max-width: 1200px;
    margin: auto;
    margin-top: 100px;
    /* **** */
    perspective: 1000px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    }
    .card__father{
    margin: 20px;
    perspective: 1000px;
    /* ** * */
    }
    .card{
    width: 350px;
    height: 400px;
    position: relative;
    /* **** */
    transform-style: preserve-3d;
    transition: all 600ms;
    }

    .card__front img{
    width: 100%;
    height: 100%;
    }
    .body__card_front{
    position: absolute;
    top: 0;
    text-align: center;
    /* background-color: blanchedalmond; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .card__front{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    }
    .body__card_front h1{
    padding: 0 20px;
    }
    .card__back{
    background-color: aqua;
    width: 100%;
    height: 100%;
    }
    .body__card_back{
    background-color: bisque;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content :space-around;
    align-items: center;
    }
    .body__card_back h1{
    text-align: center;
    }
    .body__card_back p{
    text-align: center;
    font-size: 20px;
    }
    /* -------------------------------------------------------- */
    .card__father:hover .card{
    transform: rotateY(180deg);
    }
    .card__front{
    background-size: cover;
    background-position: center;
    }
    .card__front,
    .card__back{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    border-radius: 20px;
    }
    .card__back{
    transform: rotateY(180deg);
    background: white;
    }
    .body__card_front{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transform: translateZ(60px);
    }
    .bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    }
    .body__card_back{
    padding: 40px;
    text-align: center;
    transform: translateZ(60px);
    }
    .body__card_back p{
    margin-top: 30px;
    font-size: 18px;
    }
    .body__card_back input{
    padding: 10px 40px;
    margin-top: 30px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    color: white;
    background: #58B0F6;
    box-shadow: 1px 1px 30px -5px #58B0F6;
    border-radius: 10px;
    transition: box-shadow 600ms;
    }
    .body__card_back input:hover{
    box-shadow: 1px 1px 30px 0px #449de6;
    }

    You might also like