Transformări
Una dintre noutățile CSS3, comparativ cu versiunea anterioară, este capacitatea integrată de a transforma elementele. Transformările includ acțiuni precum rotirea, scalarea, înclinarea sau deplasarea elementului pe verticală sau orizontală. Pentru a crea transformări în CSS3, se utilizează proprietatea transform.
Rotire
Pentru a roti un element, proprietatea transform folosește funcția rotate:
transform: rotate(unghi_rotire deg);După cuvântul rotate în paranteze se specifică valoarea unghiului de rotație în grade. De exemplu, să rotim un bloc cu 30 de grade:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transformări în CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.rotated{
transform: rotate(30deg);
}
</style>
</head>
<body>
<div></div>
<div class="rotated">rotate(30deg)</div>
<div></div>
</body>
</html>
Se poate observa că elementul rotit se poate suprapune peste elementele adiacente, deoarece mai întâi se stabilește poziționarea elementelor, iar apoi se efectuează rotația.
Unghiul de rotație poate avea atât valori pozitive, cât și negative. În cazul unei valori negative, rotația se face în direcția opusă.
Scalare
Aplicarea scalării are următoarea formă:
transform: scale(valoare_scalare);Utilizăm scalarea:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transformări în CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.halfScale{
transform: scale(0.5);
}
.doubleScale{
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
<div class="doubleScale">scale(2)</div>
<div></div>
<div class="halfScale">scale(0.5)</div>
</body>
</html>
O valoare mai mare de 1 duce la extinderea pe verticală și orizontală, iar o valoare mai mică de 1 - la comprimare. Astfel, valoarea 0.5 reduce dimensiunea la jumătate, iar valoarea 1.5 mărește dimensiunea cu o jumătate.
De asemenea, se pot seta valorile de scalare separat pentru verticală și orizontală:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transformări în CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.scale1{
transform: scale(2, 0.5);
}
</style>
</head>
<body>
<div></div>
<div class="scale1">scale(2, 0.5)</div>
<div></div>
</body>
</html>
În acest caz, scalarea pe orizontală este de două ori, iar pe verticală de 0.5 ori.
Se pot seta și separat funcțiile de scalare: scaleX() pentru orizontală și scaleY() pentru verticală. De exemplu:
.scale1{
transform: scaleX(2);
}Utilizând valori negative, se poate crea efectul de oglindire:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transformări în CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.scale1{
transform: scaleX(-1);
}
</style>
</head>
<body>
<div></div>
<div class="scale1">scaleX(-1)</div>
<div></div>
</body>
</html>
Deplasare
Pentru deplasarea unui element se utilizează funcția translate:
transform: translate(offset_X, offset_Y);Valoarea offset_X indică cât este deplasat elementul pe orizontală, iar offset_Y - pe verticală.
De exemplu, să deplasăm un bloc cu 30 de pixeli în jos și cu 50 de pixeli în dreapta:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transformări în CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.translated{
transform: translate(50px, 30px);
background-color:red;
}
</style>
</head>
<body>
<div></div>
<div class="translated"></div>
<div></div>
</body>
</html>
Ca unități de măsură pentru deplasare se pot folosi nu numai pixelii, dar și alte unități de măsură de lungime din CSS - em, % etc.
Cu ajutorul funcțiilor suplimentare se pot aplica deplasări separate pe orizontală sau verticală: translateX() (deplasare pe orizontală) și translateY() (deplasare pe verticală). De exemplu:
transform: translateX(30px);Pentru valori negative, elementul se deplasează în direcția opusă:
transform: translateY(-2.5em);Înclinare
Pentru înclinarea unui element se folosește funcția skew():
transform: skew(X, Y);Primul parametru indică câte grade se înclină elementul pe axa X, iar al doilea - valoarea înclinării pe axa Y.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transformări în CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.skewed{
transform: skew(30deg, 10deg);
background-color:red;
}
</style>
</head>
<body>
<div></div>
<div class="skewed"></div>
<div></div>
</body>
</html>
Pentru a crea o înclinare doar pe o axă, pentru cealaltă axă trebuie utilizată valoarea 0. De exemplu, înclinare de 45 de grade pe axa X:
transform: skew(45deg, 0);Sau înclinare de 45 de grade doar pe axa Y:
transform: skew(0, 45deg);Pentru înclinare separată pe axele X și Y în CSS există funcții speciale: skewX() și skewY() respectiv.
transform: skewX(45deg);Se pot folosi și valori negative. Atunci înclinarea se va face în direcția opusă:
transform: skewX(-30deg);Combinarea transformărilor
Dacă trebuie să aplicăm unui element mai multe transformări, de exemplu, rotație și deplasare, le putem combina. De exemplu, aplicarea tuturor celor patru transformări:
transform: translate(50px, 100px) skew(30deg, 10deg) scale(1.5) rotate(90deg);Browserul aplică toate aceste funcții în ordinea în care apar. Adică, în acest caz, mai întâi se aplică deplasarea, apoi înclinarea, scalarea și la final rotația.
Punctul de origine al transformării
Implicit, când se aplică transformări, browserul folosește centrul elementului ca punct de început pentru transformare. Cu toate acestea, utilizând proprietatea transform-origin, se poate schimba punctul de origine al transformării. Această proprietate acceptă valori în pixeli, em și procente. De asemenea, se pot utiliza următoarele cuvinte cheie pentru a stabili punctul:
- left top: colțul stânga sus al elementului
- left bottom: colțul stânga jos al elementului
- right top: colțul dreapta sus al elementului
- right bottom: colțul dreapta jos al elementului
Exemplu de cod HTML și CSS care ilustrează modificarea punctului de origine pentru rotație:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transformări în CSS3</title>
<style>
div{
background-color: #ccc;
width: 100px;
height: 100px;
margin: 80px 30px;
float: left;
box-sizing: border-box;
border: 1px solid #333;
}
.transform1{
transform: rotate(-45deg);
}
.transform2{
transform-origin: left top;
transform: rotate(-45deg);
}
.transform3{
transform-origin: right bottom;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="transform1"></div>
<div class="transform2"></div>
<div class="transform3"></div>
</body>
</html>În acest exemplu, prima divizie se rotește în jurul centrului său, în timp ce celelalte două divizii folosesc un punct de origine personalizat specificat pentru a demonstra impactul asupra efectului de rotație.
