preklopna kartica

Preklopna kartica (ang. Flip card)

Preklopna kartica je uporabniški vmesnik, ki omogoča prikaz in skrivanje dodatnih informacij na interaktivni način znotraj ene kartice. Uporablja se za strnitev in organizacijo vsebine, tako da je uporabnik ob prvem pogledu ne preobremenijo vse informacije.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Preklopna Kartica</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

body {
            margin: 0;
            padding: 0;
        }

.preklopnaKartica {
            background-color: transparent;
            width: 600px;
            height: 500px;
            perspective: 1000px;
            overflow: hidden;
        }

.preklopnaKarticaBox {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s ease-in-out;
            transform-style: preserve-3d;
        }

.preklopnaKartica:hover .preklopnaKarticaBox {
            transform: rotateY(180deg);
        }

/* Sprednja stran */
        .preklopnaKarticaSpredaj {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            z-index: 2;
            transform: rotateY(0);
        }

.preklopnaKarticaSpredaj img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* Zadnja stran */
        .preklopnaKarticaZadaj {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            z-index: 1;
            transform: rotateY(180deg);
        }

.preklopnaKarticaZadaj img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* MEDIA QUERY: prilagoditev za manjše zaslone */
        @media screen and (max-width: 680px) {
            .preklopnaKartica {
                width: 100%;
                max-width: 600px;
                height: calc(100vw * 5/6);
                margin: 20px auto;
            }

.preklopnaKarticaBox {
                height: 100%;
            }

.preklopnaKarticaSpredaj,
            .preklopnaKarticaZadaj {
                height: 100%;
            }
        }
    </style>
</head>
<body>
<div class="preklopnaKartica">
    <div class="preklopnaKarticaBox">
        
        <div class="preklopnaKarticaSpredaj">
            <img src="/demo/smesko1.svg" alt="Icon Spredaj">
        </div>
        
        <div class="preklopnaKarticaZadaj">
            <img src="/demo/smesko2.svg" alt="Icon Zadaj">
        </div>
    </div>
</div>
</body>
</html>