Mengapakah transformasi CSS kembali ke kedudukan asal untuk elemen sebaris?

Masalah Transform Translation Snapping Back

Apabila menggunakan transformasi pada elemen menggunakan CSS, seseorang mungkin menghadapi isu di mana elemen terkunci kembali kepada asalnya kedudukan selepas peralihan. Tingkah laku ini amat ketara apabila bekerja dengan elemen sebaris.

Punca: Nilai Paparan Tidak Betul

Transformasi CSS tidak menyokong elemen sepenuhnya dengan paparan: sebaris. Ini boleh membawa kepada tingkah laku yang tidak dijangka, termasuk kesan snap-back.

Penyelesaian: Tukar Nilai Paparan

Untuk menyelesaikan isu ini, tukar tetapan paparan kepada sekatan sebaris untuk unsur yang terjejas. Ini akan membolehkan transformasi digunakan dengan betul dan menghalang gelagat menyentap balik.

Kod Contoh:

Pertimbangkan coretan berikut di mana kelas .author pada mulanya ditetapkan untuk dipaparkan : inline dan mengalami isu snap-back.

<code class="css">.author {
  display: inline;
  ...
  transition: all 250ms ease-in-out;
}</code>

Dengan menukar sifat paparan kepada inline-block, transformasi kini akan berfungsi seperti yang diharapkan dan elemen akan kekal dalam kedudukan yang diingini selepas peralihan:

<code class="css">.author {
  display: inline-block;
  ...
  transition: all 250ms ease-in-out;
}</code>

Atas ialah kandungan terperinci Mengapakah transformasi CSS kembali ke kedudukan asal untuk elemen sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!