Scale w CSS3

By /

CSS

Transformacja scale w CSS3 pozwala na zmianę rozmiaru elementów HTML bez konieczności modyfikacji ich pierwotnych właściwości szerokości, wysokości czy innych atrybutów rozmiaru. Jest to część specyfikacji CSS Transforms, która umożliwia zastosowanie różnorodnych transformacji, takich jak skalowanie, obracanie, przesuwanie czy skośne przekształcanie elementów. Skalowanie może być stosowane do dowolnego elementu, dodając efekty wizualne, interaktywność lub po prostu zmieniając sposób prezentacji treści.

Przykład zastosowania scale w CSS3

W poniższym przykładzie pokażemy, jak zastosować transformację scale do zmiany rozmiaru obrazka i tekstu po najechaniu kursorem. Zostanie to osiągnięte poprzez połączenie HTML, CSS oraz prostego kodu JavaScript do dodania interaktywności.

Kod HTML i CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scale w CSS3</title>
    <style>
        .scalable {
            transition: transform 0.5s ease;
        }

        .scalable:hover {
            transform: scale(1.1); /* Zwiększa rozmiar elementu o 10% */
        }

        .container {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>

<div class="container">
    <img src="example.jpg" alt="Przykład obrazka" class="scalable">
    <p class="scalable">Najedź na mnie, aby zobaczyć efekt scale!</p>
</div>

</body>
</html>

W powyższym przykładzie, klasa .scalable jest dodana do obrazka i paragrafu. CSS określa, że każdy element z tą klasą będzie miał zastosowaną transformację scale(1.1) po najechaniu na niego kursorem (:hover). Efekt jest płynny dzięki zastosowaniu właściwości transition, która animuje zmianę transformacji przez 0.5 sekundy.

Podsumowanie

Transformacja scale w CSS3 jest potężnym narzędziem, które pozwala twórcom stron internetowych na wprowadzenie dynamicznych i atrakcyjnych wizualnie efektów. Dzięki łatwości użycia i wsparciu we współczesnych przeglądarkach, skalowanie elementów może znacznie wzbogacić interaktywność i estetykę stron internetowych. Wykorzystanie transformacji scale w połączeniu z innymi transformacjami i przejściami CSS otwiera szerokie możliwości dla kreatywnego projektowania UI/UX.

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

Powiązane artykuły

Scroll to Top