Transformacje

CSS3 wprowadza wiele potężnych narzędzi do wizualnej manipulacji elementami strony internetowej bez użycia obrazów czy skryptów JavaScript. Jednym z takich narzędzi są transformacje, które pozwalają na zmianę kształtu, rozmiaru, położenia oraz orientacji elementów HTML na stronie. Transformacje w CSS3 oferują szeroki zakres możliwości, takich jak obracanie, skalowanie, przesuwanie oraz skośne przekształcanie elementów.

Przykład kompletny

Poniższy przykład kodu HTML i CSS ilustruje użycie różnych transformacji w CSS3. Przedstawia on cztery podstawowe transformacje: obrót (rotate), skalowanie (scale), przesunięcie (translate) i skos (skew). Dla każdego z tych transformacji, w komentarzach zawarto opis wartości, które można użyć.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład transformacji w CSS3</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 300px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            transition: transform 0.5s ease;
        }
        .rotate {
            /* Obraca element o 45 stopni */
            transform: rotate(45deg);
        }
        .scale {
            /* Skaluje element do dwukrotności jego rozmiaru */
            transform: scale(2);
        }
        .translate {
            /* Przesuwa element o 50px w prawo i 50px w dół */
            transform: translate(50px, 50px);
        }
        .skew {
            /* Pochyla element o 20 stopni wzdłuż osi X */
            transform: skewX(20deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box rotate">Obrót</div>
        <div class="box scale">Skalowanie</div>
        <div class="box translate">Przesunięcie</div>
        <div class="box skew">Skos</div>
    </div>
</body>
</html>

Możliwe wartości transformacji

  • rotate: rotate(deg), gdzie deg to stopnie obrotu. Przykład: rotate(45deg) obraca element o 45 stopni.
  • scale: scale(x[, y]), gdzie x to skala w poziomie, a y to skala w pionie (opcjonalnie). Przykład: scale(2, 3) skaluje element dwukrotnie w poziomie i trzykrotnie w pionie.
  • translate: translate(x, y), gdzie x i y to wartości przesunięcia w pikselach lub procentach. Przykład: translate(50px, 100%) przesuwa element o 50 pikseli w prawo i 100% jego wysokości w dół.
  • skew: skewX(deg) lub skewY(deg), gdzie deg to stopnie skosu. Przykład: skewX(30deg) pochyla element o 30 stopni wzdłuż osi X.

Podsumowanie

Transformacje w CSS3 są potężnym narzędziem do tworzenia dynamicznych i atrakcyjnych wizualnie stron internetowych. Pozwalają one na łatwe manipulowanie elementami bez potrzeby użycia grafiki czy skomplikowanego kodu JavaScript. Dzięki transformacjom, można tworzyć efektywne animacje, efekty wizualne i poprawiać ogólną interaktywność strony.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top