CSS3 Transformări
CSS3 transformatele vă permit să traducă, roti, la scară, și oblic elemente.
O transformare este un efect care permite un element schimba forma, mărimea și poziția.
CSS3 suportă transformări 2D și 3D.
Mouse-ul peste elementele de mai jos pentru a vedea diferența dintre un 2D și o transformare 3D:
Suport Browser pentru Transformări 2D
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmate de -ms-, -webkit-, -moz- sau -o- specify prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 Transformări 2D
În acest capitol veți învăța despre următoarele metode de transformare 2D:
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
Tip: Vei învăța despre transformări 3D în capitolul următor.
translate() Metoda
translate() Metoda se deplasează un element din poziția curentă ( în funcție de parametrii indicați pentru axa X și axa Y).
Următorul exemplu mută <div> elementul 50 de pixeli la dreapta, și 100 de pixeli în jos din poziția sa curentă:
Exemplu
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Încearcă - l singur » rotate() Metoda
rotate() Metoda se rotește în sens orar un element sau în sens antiorar , conform unui anumit grad.
Exemplul următor se rotește <div> elementul în sens orar cu 20 de grade:
Exemplu
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
Încearcă - l singur » Folosind valorile negative se vor roti elementul contra-sensul acelor de ceasornic.
Exemplul următor se rotește <div> elementul în sens antiorar cu 20 de grade:
Exemplu
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
Încearcă - l singur » scale() Metoda
La scale() crește sau scade metoda de mărimea unui element (according to the parameters given for the width and height) în (according to the parameters given for the width and height) .
Exemplul următor crește <div> elementul să fie de două ori cu lățimea sa inițială, și de trei ori din înălțimea sa inițială:
Exemplu
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
Încearcă - l singur » Exemplul următor scade <div> elementul să fie jumătate din lățimea sa inițială și înălțime:
Exemplu
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
Încearcă - l singur » skewX() Metoda
skewX() Metoda skews un element de-a lungul axei X prin unghiul dat.
Exemplul următor distorsionează <div> Elementul 20 de grade de-a lungul axei X:
Exemplu
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
Încearcă - l singur » skewY() Metoda
skewY() Metoda skews un element de-a lungul axei Y de unghiul dat.
Exemplul următor distorsionează <div> Elementul 20 de grade de-a lungul axei Y:
Exemplu
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
Încearcă - l singur » skew() Metoda
skew() Metoda skews un element de-a lungul X și axa Y de unghiurile indicate.
Exemplul următor distorsionează <div> Elementul 20 de grade de-a lungul axei X, și 10 de grade de-a lungul axei Y:
Exemplu
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
Încearcă - l singur » Dacă al doilea parametru nu este specificat, are o valoare de zero. Deci, exemplul următor distorsionează <div> Elementul 20 de grade de-a lungul axei X:
Exemplu
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
Încearcă - l singur » matrix() Metoda
matrix() metoda combină toate 2D transforma metode într - una singură.
matrix() metoda ia șase parametri, conținând funcții matematice, care permite rotirea, scara, mutare (translate) , și înclinarea elementelor.
Parametrii sunt după cum urmează: matrix( scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY() ) :
Exemplu
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»
CSS3 Transform Properties
Următorul tabel listează toate 2D transforma proprietăți:
| Proprietate | Descriere |
|---|---|
| transform | Se aplică o transformare 2D sau 3D la un element |
| transform-origin | Vă permite să schimbați poziția pe elementele transformate |
2D Transform Metode
| Funcţie | Descriere |
|---|---|
| matrix( n,n,n,n,n,n ) | Definește o transformare 2D, folosind o matrice de șase valori |
| translate( x,y ) | Definește o traducere 2D, deplasarea elementului de-a lungul axelor X și axa Y |
| translateX( n ) | Definește o traducere 2D, deplasarea elementului de-a lungul axei X- |
| translateY( n ) | Definește o traducere 2D, deplasarea elementului de-a lungul axei Y |
| scale( x,y ) | Definește o transformare scara 2D, schimbarea elementelor de lățime și înălțime |
| scaleX( n ) | Definește o transformare scara 2D, modificarea lățimii elementului |
| scaleY( n ) | Definește o transformare scara 2D, modificarea înălțimii elementului |
| rotate( angle ) | Definește o rotație 2D, unghiul este specificat în parametrul |
| skew( x-angle,y-angle ) | Definește o transformare 2D oblic de-a lungul axelor X și axa Y |
| skewX( angle ) | Definește o transformare 2D oblic în lungul axei X |
| skewY( angle ) | Definește o transformare 2D oblic de-a lungul axei Y |