CSS Lastnost: transform-origin

Lastnost transform-origin nam omogoča spreminjanje položaja preoblikovanih elementov. 2D preoblikovanja lahko spremenijo os x in y elementa, 3D preoblikovanja pa še z os elementa. To lastnost je potrebno uporabiti skupaj s transform lastnostjo.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>transform-origin</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;
        }

        .demo-skatla {
            width: 200px;
            height: 100px;
            margin: 30px;
            background: linear-gradient(45deg, #ff8c00, #ff4500);
            color: white;
            display: inline-block;
            transition: transform 0.5s ease;
            position: relative;
            cursor: pointer;
            border-radius: 5px;
        }

        .tocka-vrtenja {
            position: absolute;
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 50%;
            z-index: 2;
        }

        /* Različne točke vrtenja */
        .primer-center {
            transform-origin: center;
        }
        .primer-center .tocka-vrtenja {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .primer-zgoraj-levo {
            transform-origin: left top;
        }
        .primer-zgoraj-levo .tocka-vrtenja {
            left: 0;
            top: 0;
        }

        .primer-spodaj-desno {
            transform-origin: right bottom;
        }
        .primer-spodaj-desno .tocka-vrtenja {
            right: 0;
            bottom: 0;
        }

        .primer-odstotki {
            transform-origin: 75% 25%;
        }
        .primer-odstotki .tocka-vrtenja {
            left: 75%;
            top: 25%;
            transform: translate(-50%, -50%);
        }

        /* Hover efekti */
        .demo-skatla:hover {
            transform: rotate(45deg);
        }

        .opis {
            font-size: 14px;
            color: #666;
            margin: 10px 0;
        }

        .navodilo {
            background-color: #e9ecef;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="vsebovalnik">
        <div class="navodilo">
            <strong>Navodilo:</strong> Preleti element z miško za prikaz vrtenja. 
            Rdeča pika označuje točko vrtenja (transform-origin).
        </div>

        <h3>Središčna točka (transform-origin: center)</h3>
        <div class="demo-skatla primer-center">
            <div class="tocka-vrtenja"></div>
            <div class="vsebina">Vrtenje okoli središča</div>
        </div>
        <div class="opis">Element se vrti okoli svoje središčne točke</div>

        <h3>Zgornji levi kot (transform-origin: left top)</h3>
        <div class="demo-skatla primer-zgoraj-levo">
            <div class="tocka-vrtenja"></div>
            <div class="vsebina">Vrtenje okoli zgornjega levega kota</div>
        </div>
        <div class="opis">Element se vrti okoli zgornjega levega kota</div>

        <h3>Spodnji desni kot (transform-origin: right bottom)</h3>
        <div class="demo-skatla primer-spodaj-desno">
            <div class="tocka-vrtenja"></div>
            <div class="vsebina">Vrtenje okoli spodnjega desnega kota</div>
        </div>
        <div class="opis">Element se vrti okoli spodnjega desnega kota</div>

        <h3>Odstotki (transform-origin: 75% 25%)</h3>
        <div class="demo-skatla primer-odstotki">
            <div class="tocka-vrtenja"></div>
            <div class="vsebina">Vrtenje okoli točke 75% 25%</div>
        </div>
        <div class="opis">Element se vrti okoli točke, ki je 75% od leve in 25% od zgornjega roba</div>
    </div>
</body>
</html>

REZULTAT