backface-visibility:

backface-visibility:

X

backface-visibility

Določa, ali mora biti zadnja stran elementa vidna, ko je obrnjen proti uporabniku.

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

<style>
        * {
            box-sizing: border-box;
        }
        /* definiramo vsebnik div, kocko in ploskev */
        .vsebnik {
            width: 300px;
            height: auto;
            margin: 75px 0 0 75px;
            border: none;
        }
        .pokazi div {
            backface-visibility: visible;
        }
        .skrij div {
            backface-visibility: hidden;
        }
        /* določimo smer ploskev */
        .kocka {
            width: 100px;
            height: 100px;
            perspective: 550px;
            perspective-origin: 280% 250%;
            transform-style: preserve-3d;
        }
        .ploskev{
            display: block;
            position: absolute;
            width: 100px;
            height: 100px;
            border: none;
            line-height: 100px;
            font-family: sans-serif;
            font-size: 60px;
            color: white;
            text-align: center;
        }
        .spredaj {
            background: rgb(0 0 0 / 30%);
            transform: translateZ(50px);
        }
        .zadaj {
            background: rgb(0 255 0 / 100%);
            color: black;
            transform: rotateY(180deg) translateZ(50px);
        }
        .desno {
            background: rgb(196 0 0 / 70%);
            transform: rotateY(90deg) translateZ(50px);
        }
        .levo {
            background: rgb(0 0 196 / 70%);
            transform: rotateY(-90deg) translateZ(50px);
        }
        .zgoraj {
            background: rgb(196 196 0 / 70%);
            transform: rotateX(90deg) translateZ(50px);
        }
        .spodaj {
            background: rgb(196 0 196 / 70%);
            transform: rotateX(-90deg) translateZ(50px);
        }
    </style>
</head>
<body>
<h3>backface-visibility: visible;</h3>
<p>Ker se vse ploskve delno prosojne, so zadnje ploskve (2, 4, 5) vidne skozi srednje (1, 3, 6).</p>
<div class="vsebnik">
    <div class="kocka pokazi">
        <div class="ploskev spredaj">1</div>
        <div class="ploskev zadaj">2</div>
        <div class="ploskev desno">3</div>
        <div class="ploskev levo">4</div>
        <div class="ploskev zgoraj">5</div>
        <div class="ploskev spodaj">6</div>
    </div>
</div>

<h3>backface-visibility: hidden;</h3>
<p>Zadnje ploskve (2, 4, 5) so skrite.</p>
<div class="vsebnik">
    <div class="kocka skrij">
        <div class="ploskev spredaj">1</div>
        <div class="ploskev zadaj">2</div>
        <div class="ploskev desno">3</div>
        <div class="ploskev levo">4</div>
        <div class="ploskev zgoraj">5</div>
        <div class="ploskev spodaj">6</div>
    </div>
</div>
</body>
</html>