CSS3 Transformări 3D
CSS3 vă permite să formatați elemente utilizând transformări 3D.
Mouse-ul peste elementele de mai jos pentru a vedea diferența dintre un 2D și o transformare 3D:
Suport în browser pentru Transformări 3D
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 Transformări 3D
În acest capitol veți învăța despre următoarele metode de transformare 3D:
-
rotateX() -
rotateY() -
rotateZ()
rotateX() Metoda
rotateX() Metoda se rotește în jurul unui element axa X sa la un anumit grad:
Exemplu
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Încearcă - l singur » rotateY() Metoda
rotateY() Metoda se rotește în jurul unui element Y axa sa la un anumit grad:
Exemplu
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
Încearcă - l singur » rotateZ() Metoda
rotateZ() Metoda se rotește în jurul unui element axa Z sale la un anumit grad:
Exemplu
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 »
CSS3 Transform Properties
Următorul tabel listează toate 3D 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 |
| transform-style | Specifică modul în care elementele imbricate sunt redate în spațiu 3D |
| perspective | Specifică perspectiva asupra modului elementelor 3D sunt vizualizate |
| perspective-origin | Specifică poziția de jos a elementelor 3D |
| backface-visibility | Definește dacă este sau nu un element trebuie să fie vizibilă atunci când nu se confruntă ecranul |
3D Transform Metode
| Funcţie | Descriere |
|---|---|
| matrix3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) | Definește o transformare 3D, folosind o matrice 4x4 a 16 valori |
| translate3d( x,y,z ) | Definește o traducere 3D |
| translateX( x ) | Definește o traducere 3D, folosind doar valoarea pentru axa X |
| translateY( y ) | Definește o traducere 3D, folosind doar valoarea pentru axa Y |
| translateZ( z ) | Definește o traducere 3D, folosind doar valoarea pentru axa Z |
| scale3d( x,y,z ) | Definește o transformare scară 3D |
| scaleX( x ) | Definește o transformare la scară 3D oferind o valoare pentru axa X |
| scaleY( y ) | Definește o transformare la scară 3D oferind o valoare pentru axa Y |
| scaleZ( z ) | Definește o transformare la scară 3D oferind o valoare pentru axa Z |
| rotate3d( x,y,z,angle ) | Definește o rotație 3D |
| rotateX( angle ) | Definește o rotație 3D de-a lungul axei X- |
| rotateY( angle ) | Definește o rotație 3D de-a lungul axei Y |
| rotateZ( angle ) | Definește o rotație 3D de-a lungul axei Z |
| perspective( n ) | Definește o vedere în perspectivă pentru un element transformat 3D |