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>
