Bagaimana untuk Mencapai Pengembangan Berpusat Elemen Div dalam CSS Tanpa JavaScript?

Memperluas Div daripada Pusatnya Menggunakan CSS

Dalam bidang transformasi CSS, seseorang mungkin membayangkan elemen div berkembang dengan anggun dari paksi pusatnya , bukannya tingkah laku lalai untuk mengembangkan dari sudut atas dan kiri. Walau bagaimanapun, kesan yang diingini ini memberikan cabaran tanpa JavaScript.

Penyelesaian: Memanipulasi Margin

Kunci untuk mencapai pengembangan berpusat ini terletak pada peralihan margin div menggunakan khusus formula. Teknik ini melibatkan pengiraan perbezaan antara saiz sasaran dan saiz awal dan membahagikan hasilnya dengan dua. Nilai ini kemudiannya digunakan sebagai pelarasan margin negatif semasa peralihan.

Pilihan Penyesuaian:

Bergantung pada gelagat yang diingini, tiga pilihan utama tersedia:

Pilihan 1: Memelihara Ruang

Pilihan ini mengembangkan div dalam ruang yang dikhaskan di sekelilingnya, meninggalkan elemen sekeliling tidak terjejas.

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

Pilihan 2: Mengatasi Elemen Sekeliling

Dengan menetapkan margin negatif, pilihan ini menyebabkan div berkembang ke atas elemen berdekatan, bertindih kandungannya.

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

Pilihan 3: Beralih Elemen Sekeliling

Variasi ini menganjakkan div dan mengalihkan elemen seterusnya ke bawah aliran dokumen.

#square {
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    top: -50px; /* calculated as initial top - ((new height - initial height)/2) */
    left: -50px; /* calculated as initial left - ((new width - initial width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}

Nota: Pengiraan ini digunakan pada div segi empat sama. Untuk elemen bukan segi empat sama, pengiraan untuk pelarasan jidar mungkin berbeza sedikit bergantung pada saiz semula berkadar yang diingini.

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