Bagaimanakah Anda Boleh Memusingkan Kedua-dua Penjuru Objek Menggunakan Transformasi CSS?

Skewing Corners with CSS Transform

Dalam CSS, sifat transform menawarkan pilihan serba boleh untuk memanipulasi objek dalam ruang 2D dan 3D. Salah satu keupayaannya ialah condong, yang melibatkan memesongkan bentuk objek di sepanjang paksi tertentu.

Cabaran Mencondongkan Sudut

Memusing kedua-dua penjuru objek mungkin kelihatan seperti tugas yang mudah, tetapi ia tidak boleh dicapai secara langsung menggunakan sifat transform sahaja. Fungsi skew() memesongkan hanya satu paksi pada satu masa.

Perspektif 3D untuk Penyelamat

Untuk menyerong kedua-dua penjuru, kami menggunakan teknik yang memanfaatkan transformasi perspektif 3D . Dengan menggunakan perspektif pada objek, kami mencipta ilusi kedalaman, membolehkan kami menyerong elemen dengan cara yang menyerupai pencongan sudut.

Penyelesaian dengan Transformasi Perspektif

The Kod CSS untuk mencapai kesan yang diingini adalah seperti berikut:

<code class="css">.red.box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}</code>

HTML:

<code class="html"><div class="box red"></div></code>

Penjelasan:

• perspektif(600px) mencipta kesan perspektif 3D dengan sudut pandang 600 piksel dari objek.
• putarY(45deg) memutar objek 45 darjah sepanjang paksi-Y. Putaran dalam ruang 3D ini memberikan ilusi menyerong kedua-dua sudut atas dan bawah.

Penyelesaian ini, yang diperoleh daripada http://desandro.github.com/3dtransforms/docs/perspective.html, menyediakan cara yang elegan untuk mencapai kesan yang diingini menggunakan transformasi CSS. Ini adalah bukti kuasa CSS dan kemungkinan kreatif yang ditawarkannya untuk memanipulasi elemen pada halaman web.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Memusingkan Kedua-dua Penjuru Objek Menggunakan Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!