Właściwość transform
jest kluczowym elementem podczas tworzenia animacji za pomocą CSS. Zagadnienie to jest jednym z tematów omawianych na moim nowym kursie – Tworzenie stron internetowych. Zostało ono wybrane jako przykładowa lekcja, którą możemy obejrzeć przed podjęciem decyzji o zakupie. Temat ten postanowiłem również umieścić na blogu, ponieważ co prawda nie jest on jakoś duży, ale dotyczy bardzo przydatnej właściwości: CSS Transform.

Animacja w głównej mierze polega na poruszaniu, przemieszczaniu, obracaniu oraz zmianie wielkości. Wszystkie te rzeczy możemy wykonać za pomocą jednej właściwości CSS – transform
. Spójrzmy na najbardziej przydatne wartości, jakich możemy w tym przypadku użyć:
translate(X, Y)
– przesuwanie elementów góra/dół, np.translate(10px, 2px)
rotate(kąt)
– obracanie elementów o określony kąt, np.rotate(20deg)
,scale(skala)
– powiększanie/pomniejszanie elementów, np.scale(2)
.
Położenie każdego z elementów na stronie możemy zmieniać w trzech płaszczyznach, czyli względem osi X, Y oraz Z. Z tego powodu każda z powyżej wymienionych wartości występuje jeszcze w wersjach z nazwą osi na końcu nazwy. Przykładowo wartość rotateY
oznacza obrót wokół osi Y, scaleX
oznacza powiększenie/zmniejszenie tylko względem osi X. Wszystkie te przypadki zaprezentowane zostaną na przykładzie.
Wspomniane powyżej wartości właściwości CSS Transform możemy zobrazować w następujący sposób:

Przykład CSS Transform
Poniższy przykład zawiera kod CSS, dzięki któremu możemy manipulować testowym elementem na stronie za pomocą CSS Transform. Pod przykładem znajduje się dokładne wyjaśnienie tego tematu w formie materiału wideo.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Animacje</title> <style> body { background-color: skyblue; font-family: sans-serif; text-align: center; } .shape { display: inline-block; border: 2px solid black; border-radius: 20px; background-color: aliceblue; width: 200px; height: 100px; margin-top: 100px; } .reference { position: absolute; opacity: 0.2; border-style: dashed; } .anim { /* Odkomentuj poszczególne linie i sprawdź jak zmieni się położenie testowego elementu */ /* transform: translateX(200px); */ /* transform: translateY(300px); */ /* transform: translateZ(400px); */ /* transform: translate(200px, 300px); */ /* transform: scaleX(3); */ /* transform: scaleY(2); */ /* transform: scaleZ(2); */ /* transform: scale(3, 2); */ /* transform: scale(2); */ /* transform: rotateX(40deg); */ /* transform: rotateY(40deg); */ /* transform: rotateZ(40deg); */ /* transform-origin: top left; */ /* transform: rotate(45deg); */ } </style> </head> <body> <div> <div class="shape reference"> <p>Element bazowy</p> </div> <div class="shape anim"> <p>Element bazowy</p> </div> </div> </body> </html>