CSS Lastnost: transform

Lastnost transform uporabi 2D ali 3D preoblikovanje elementa. Ta lastnost nam omogoča vrtenje, spreminjanje velikosti, premikanje, nagib itn.

PRIMER

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

    <style>
        * {
            box-sizing: border-box;
        }
        
        .vsebovalnik {
            color: #333333;
            margin: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .skatla {
            width: 200px;
            height: 100px;
            background: linear-gradient(45deg, #ff8c00, #ff4500);
            color: white;
            padding: 10px;
            margin: 20px;
            display: inline-block;
            transition: transform 0.3s ease;
            text-align: center;
            line-height: 80px;
            cursor: pointer;
            border-radius: 5px;
        }

        /* 2D Transformacije */
        .zavrti:hover {
            transform: rotate(45deg);
        }

        .povecaj:hover {
            transform: scale(1.2);
        }

        .premakni:hover {
            transform: translate(50px, 20px);
        }

        .nagni:hover {
            transform: skew(10deg, 10deg);
        }

        /* 3D Transformacije */
        .perspektiva-vsebovalnik {
            perspective: 1000px;
        }

        .zavrti3d:hover {
            transform: rotate3d(1, 1, 1, 45deg);
        }

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

        /* Kombinirana transformacija */
        .zdruzeno:hover {
            transform: rotate(45deg) scale(1.2) translateX(30px);
        }

        .opis {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="vsebovalnik">
        <h2>2D Transformacije</h2>
        <div class="skatla zavrti">Vrtenje</div>
        <div class="opis">← Preleti z miško: rotate(45deg)</div>

        <div class="skatla povecaj">Povečava</div>
        <div class="opis">← Preleti z miško: scale(1.2)</div>

        <div class="skatla premakni">Premik</div>
        <div class="opis">← Preleti z miško: translate(50px, 20px)</div>

        <div class="skatla nagni">Nagib</div>
        <div class="opis">← Preleti z miško: skew(10deg, 10deg)</div>
    </div>

    <div class="vsebovalnik">
        <h2>3D Transformacije</h2>
        <div class="perspektiva-vsebovalnik">
            <div class="skatla zavrti3d">3D Vrtenje</div>
            <div class="opis">← Preleti z miško: rotate3d(1, 1, 1, 45deg)</div>

            <div class="skatla obrni">Obrat</div>
            <div class="opis">← Preleti z miško: rotateY(180deg)</div>
        </div>
    </div>

    <div class="vsebovalnik">
        <h2>Kombinirana transformacija</h2>
        <div class="skatla zdruzeno">Združeno</div>
        <div class="opis">← Preleti z miško: rotate(45deg) scale(1.2) translateX(30px)</div>
    </div>
</body>
</html>

REZULTAT