Bagaimana untuk Mencapai Pengembangan Berpusat untuk Elemen DIV menggunakan Peralihan CSS?

Memperluas DIV daripada Pusatnya menggunakan CSS

Dalam soalan ini, kami berhasrat untuk mencipta kesan apabila div berkembang dari pusatnya, bukannya pengembangan biasa dari sudut kiri atas. Walaupun transformasi CSS seperti skala() boleh mencapai kesan ini, ia tidak mempunyai ketepatan piksel dan tidak menjejaskan reka letak sekeliling.

Kunci untuk mencapai gelagat ini terletak pada peralihan margin. Dengan mengira nilai margin tertentu, kami boleh membuat div berkembang dari tengah tanpa mengganggu aliran dokumen.

Pilihan untuk Pengembangan Pusat

Pilihan 1 : Peluasan dalam Ruang Terpelihara

<code class="css">#square {
  margin: 100px;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 100px;
  height: 100px;
  margin: 55px;
}</code>

Dalam pilihan ini, div mengembang dalam ruang yang telah ditempah di sekelilingnya. Peralihan jidar dikira sebagai jidar awal tolak separuh daripada perubahan lebar/tinggi.

Pilihan 2: Peluasan ke atas Elemen Sekeliling

<code class="css">#square {
  margin: 0;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  margin: -50px;
}</code>

Dengan pilihan ini, div mengembang ke atas mana-mana elemen sekeliling. Peralihan jidar dikira sebagai 0 tolak separuh daripada perubahan lebar/tinggi.

Pilihan 3: Peluasan dan Peralihan Elemen Lain

<code class="css">#square {
  position: relative;
  transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  top: -50px;
  left: -50px;
  margin-right: -50px;
  margin-bottom: -50px;
}</code>

Pilihan ini membenarkan div untuk mengembangkan ke atas elemen sebelumnya dalam aliran, sambil mengalihkan elemen berikutnya. Peralihan margin dikira sama dengan pilihan sebelumnya.

Pertimbangan untuk DIV Bukan Persegi

Pilihan di atas menganggap div segi empat sama, tetapi ia juga boleh digunakan untuk div bukan persegi dengan sedikit pelarasan pada pengiraan margin. Sebagai contoh, segi empat tepat dengan lebar dan ketinggian yang tidak sama boleh dialihkan menggunakan jidar seperti:

<code class="css">margin: -50px -100px;</code>

Ringkasnya, dengan memanipulasi jidar menggunakan peralihan CSS, adalah mungkin untuk mencipta div yang mengembang dari pusatnya, menjejaskan reka letak sekeliling seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pengembangan Berpusat untuk Elemen DIV menggunakan Peralihan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!