Rumah > hujung hadapan web > tutorial css > Bagaimana untuk melaksanakan terjemahan unsur dalam css3

Bagaimana untuk melaksanakan terjemahan unsur dalam css3

青灯夜游
Lepaskan: 2021-11-10 15:46:32
asal
7352 orang telah melayarinya

Dalam CSS3, atribut transform boleh digunakan untuk mencapai kesan terjemahan elemen Apabila nilai atribut ini ditetapkan kepada "terjemah(x,y)", elemen itu boleh diterjemahkan di sepanjang paksi-x dan paksi-y, kerana "translateX(x )" boleh menterjemah unsur sepanjang paksi-x, dan "translateY(y)" boleh menterjemah elemen sepanjang paksi-y.

Bagaimana untuk melaksanakan terjemahan unsur dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam CSS3, atribut transfrom boleh digunakan untuk mencapai kesan terjemahan elemen.

Sifat Transform menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan anda memutar, menskala, mengalih, mencondongkan, dsb. elemen. Atribut

Transform mempunyai tiga nilai untuk penterjemahan:

  • translate(x,y) mentakrifkan transformasi 2D yang menterjemahkan elemen di sepanjang paksi-x dan y- paksi.

  • translateX(x) mentakrifkan penjelmaan, menterjemahkan elemen di sepanjang paksi-x.

  • translateY(y) mentakrifkan penjelmaan, menterjemah elemen sepanjang paksi-y.

Kami menggunakan parameter terjemah untuk melaksanakan pergerakan

  • terjemah(x,y): Terjemah sepanjang paksi-x dan paksi-y

Bagaimana untuk melaksanakan terjemahan unsur dalam css3

  • terjemah 🎜>

Bagaimana untuk melaksanakan terjemahan unsur dalam css3

terjemahY: Terjemah ke paksi Y, isikan nombor positif untuk menterjemah ke bawah, isikan nombor negatif, menterjemah ke atas

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan terjemahan unsur dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan