Bagaimana perspektif CSS berfungsi

Peminat animasi CSS sering menggunakan alat perspektif yang kuat. Walaupun harta perspektif itu sendiri tidak dapat mencapai kesan 3D (kerana bentuk asas tidak mempunyai kedalaman), anda boleh menggunakan sifat transform untuk bergerak dan memutar objek dalam ruang 3D (x, y, dan z paksi), dan kemudian gunakan perspektif untuk mengawal kedalaman.

Artikel ini akan bermula dengan asas -asas, secara beransur -ansur menjelaskan konsep perspektif, dan akhirnya membuat animasi kiub berputar 3D lengkap.

Asas perspektif

Kami bermula dengan dataran hijau yang mudah dan gerakkannya pada tiga paksi.

Menggerakkan objek pada paksi X dan Y adalah sangat mudah, tetapi jika anda menggerakkannya pada paksi z, ia kelihatan seperti persegi tetap sama. Ini kerana apabila objek bergerak pada paksi Z, animasi membawa ia lebih dekat kepada kami dan kemudian jauh dari kami, tetapi saiz (dan kedudukan) dataran tetap sama. Di sinilah atribut perspective CSS dimainkan.

Walaupun perspektif tidak mempunyai kesan apabila objek bergerak pada paksi X atau Y, perspektif menjadikan persegi kelihatan lebih besar apabila ia dekat dengan kami dan lebih kecil apabila ia jauh dari kami. Ya, seperti dalam kehidupan sebenar.

Kesan yang sama juga berlaku apabila kita memutar objek:

Putar persegi pada paksi z kelihatan seperti putaran biasa yang kita kenal dan suka, tetapi apabila kita berputar persegi pada paksi X atau Y (tanpa menggunakan perspektif), ia kelihatan seperti persegi hanya menjadi lebih kecil (atau sempit) daripada berputar. Tetapi apabila kita menambah perspektif, kita dapat melihat bahawa apabila persegi berputar, bahagian dekat persegi kelihatan lebih besar, bahagian jauh kelihatan lebih kecil, dan putaran kelihatan seperti yang diharapkan.

Perhatikan bahawa apabila objek berputar pada sudut 90 ° pada paksi x atau y (atau 270 °, 450 °, 630 °, dan lain -lain), ia akan "hilang" dari pandangan. Sekali lagi, ini adalah kerana kita tidak dapat menambah kedalaman objek, dan pada kedudukan ini lebar (atau ketinggian) dataran sebenarnya akan menjadi 0.

Nilai perspektif

Kita perlu menggunakan nilai untuk menetapkan harta perspective . Nilai ini menetapkan jarak satah objek, atau dengan kata lain, intensiti perspektif. Semakin besar nilai, semakin jauh dari objek; Semakin kecil nilai, semakin jelas kesan perspektif.

Perspektif asal

Propertinya perspective-origin menentukan orientasi objek "memerhatikan" anda. Jika asalnya berpusat (ini adalah lalai) dan objek bergerak ke kanan, ia kelihatan seperti anda menontonnya dari kiri (dan sebaliknya).

Sebagai alternatif, anda boleh memusatkan objek dan menggerakkan perspective-origin . Apabila asalnya ditetapkan ke sisi, ia seperti anda "memerhatikan" objek dari sisi itu. Semakin besar nilai, semakin banyaknya kelihatan dari pusat.

Transformasi

Walaupun kedua-dua perspective dan perspective-origin ditetapkan pada bekas induk elemen dan menentukan kedudukan titik yang hilang (iaitu jarak dari mana anda "memerhatikan" objek ke satah objek), anjakan dan putaran objek ditetapkan menggunakan sifat transform , yang diisytiharkan pada objek itu sendiri.

Jika anda melihat kod dari contoh terdahulu, saya memindahkan persegi dari satu sisi ke yang lain, anda akan melihat bahawa saya menggunakan fungsi translateX() - ini masuk akal kerana saya mahu ia bergerak sepanjang paksi x. Tetapi ambil perhatian bahawa ia diberikan kepada harta transform . Fungsi ini adalah jenis transformasi yang digunakan secara langsung kepada elemen yang kita mahu tukar, tetapi tingkah lakunya mematuhi peraturan perspektif yang diberikan kepada elemen induk.

Kita boleh "menghubungkan" pelbagai fungsi untuk transform sifat. Tetapi apabila menggunakan pelbagai transformasi, terdapat tiga perkara yang sangat penting untuk dipertimbangkan:

1. Apabila objek diputar, sistem koordinatnya akan berubah dengan objek.
2. Apabila anda menerjemahkan objek, ia bergerak relatif kepada sistem koordinatnya sendiri (bukan koordinat induknya).
3. Perintah di mana nilai -nilai ini adalah perubahan bertulis (dan akan) mengubah hasil akhir.

Untuk mendapatkan kesan yang saya mahu dalam demo sebelumnya, saya perlu menterjemahkan persegi pada paksi-x. Hanya kemudian saya boleh berputar. Jika anda melakukan ini dalam urutan terbalik (berputar terlebih dahulu, kemudian terjemahan), hasilnya akan sama sekali berbeza.

Untuk menekankan pentingnya urutan nilai untuk transform sifat, mari kita lihat beberapa contoh mudah. Pertama, ia adalah transformasi dua dimensi (2D) mudah dua dataran, kedua-duanya mempunyai nilai transformasi yang sama, tetapi dalam perintah perisytiharan yang berbeza:

Begitu juga walaupun kita berputar persegi pada paksi y:

Harus diingat bahawa walaupun urutan nilai adalah penting, kita hanya dapat mengubah nilai -nilai itu sendiri untuk mendapatkan hasil yang diinginkan dan bukannya mengubah urutan nilai. Contohnya ……

 <code>transform: translateX(100px) rotateY(90deg);</code>

... kesan yang sama seperti yang berikut:

 <code>transform: rotateY(90deg) translateZ(100px);</code>

Ini kerana pada baris pertama kami memindahkan objek pada paksi-x sebelum memutar objek, tetapi pada baris kedua kami memutar objek, mengubah koordinatnya, dan kemudian memindahkannya ke atas paksi z . Hasil yang sama, nilai yang berbeza.

Mari lihat sesuatu yang lebih menarik

Sudah tentu, dataran adalah cara yang baik untuk menerangkan konsep perspektif umum, tetapi apabila kita memecahkannya ke dalam bentuk tiga dimensi (3D), kita dapat melihat bagaimana perspektif berfungsi.

Mari kita bina kiub 3D menggunakan semua yang telah kami tutupi setakat ini.

Html

Kami akan mencipta elemen .container yang berkisar di sekitar elemen .cube , .cube mengandungi enam elemen, yang mewakili enam muka kiub.

<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>

CSS Universal

Pertama, kami akan menambah beberapa perspektif kepada elemen .container . Kami kemudian akan memastikan bahawa elemen .cube mempunyai panjang sampingan 200px dan mematuhi transformasi 3D. Saya telah menambah beberapa gaya ekspresi di sini, tetapi atribut utama diserlahkan.

 /* Bekas induk dengan perspektif*/
.container {
  lebar: 400px;
  Ketinggian: 400px;
  Sempadan: 2px Pepejal Putih;
  Radius sempadan: 4px;
  Paparan: Flex;
  Justify-Content: Center;
  Align-item: pusat;
  Perspektif: 800px;
  Perspektif-asal: kanan atas;
}

/* elemen kanak -kanak, mengekalkan transformasi 3D*/
.cube {
  Kedudukan: Relatif;
  Lebar: 200px;
  Ketinggian: 200px;
  gaya transform: Preserve-3D;
}

/* Permukaan kiub, kedudukan mutlak*/
.side {
  Kedudukan: Mutlak;
  Lebar: 100%;
  Ketinggian: 100%;
  Kelegapan: 0.9;
  Sempadan: 2px Pepejal Putih;
}

/* Warna latar belakang kiub, membantu menggambarkan kerja*/
.Front {latar belakang-warna: #D50000; }
.back {latar belakang warna: #aa00ff; }

.Left {latar belakang warna: #304ffe; }
.right {latar belakang warna: #0091EA; }

.top {latar belakang-warna: #00BFA5; }
.bottom {latar belakang warna: #64DD17; }

Tukar permukaan

Bahagian depan adalah yang paling mudah. Kami bergerak ke hadapan dengan 100px:

 .Front {
  latar belakang warna: #D50000;
  Transform: TranslateZ (100px);
}

Kita boleh menggerakkan bahagian belakang kiub ke belakang dengan menambah translateZ(-100px) . Cara lain ialah memutar sisi 180Deg dan bergerak ke hadapan:

 .back {
  latar belakang warna: #AA00FF;
  Transform: TranslateZ (-100px);

  / * atau */
  /* Transform: Rotatey (180Deg) TranslateZ (100px); */
}

Seperti belakang, kita dapat mengubah sisi kiri dan kanan dalam beberapa cara:

 .left {
  latar belakang warna: #304ffe;
  Transform: Rotatey (90Deg) TranslateZ (100px);

  / * atau */
  /* Transform: TranslateX (100px) Rotatey (90Deg); */
}

.right {
  latar belakang warna: #0091EA;
  Transform: Rotatey (-90Deg) TranslateZ (100px);

  / * atau */
  /* Transform: TranslateX (-100px) Rotatey (90Deg); */
}

Bahagian atas dan bawah sedikit berbeza. Kami tidak perlu memutarnya pada paksi Y, kita perlu memutarnya pada paksi x. Sekali lagi, ia boleh dilakukan dengan pelbagai cara:

 .top {
  latar belakang warna: #00BFA5;
  Transform: RotateX (90Deg) TranslateZ (100px);

  / * atau */
  /* Transform: Translatey (-100px) RotateX (90Deg); */
}

.bottom {
  latar belakang warna: #64DD17;
  Transform: RotateX (-90Deg) TranslateZ (100px);

  / * atau */
  /* Transform: Translatey (100px) Rotatex (90Deg); */
}

Ini memberi anda kiub 3D!

Jangan ragu untuk mencuba perspective yang berbeza dan pilihan perspective-origin dan lihat bagaimana ia mempengaruhi kiub. Tidak ada nilai "betul", dan nilai -nilai ini berbeza mengikut item, kerana ia bergantung kepada animasi, saiz objek, dan kesan yang anda ingin capai.

Mari bercakap mengenai transform-style

Kami akan menambah beberapa animasi yang bagus kepada Cube, tetapi mari kita bincangkan atribut transform-style . Saya menambahnya sebelum ini dalam CSS generik tetapi ia tidak benar -benar menjelaskan apa itu atau apa yang dilakukannya.

Atribut transform-style mempunyai dua nilai:

• flat (nilai lalai)
• preserve-3d

Apabila kami menetapkan harta itu untuk preserve-3d , ia melakukan dua perkara penting:

1. Ia memberitahu wajah kiub (elemen kanak -kanak) berada di ruang 3D yang sama seperti kiub. Jika ia tidak ditetapkan untuk preserve-3d , nilai lalai adalah flat dan wajahnya diratakan pada satah kiub. preserve-3d "menyalin" perspektif kiub kepada unsur-unsur anaknya (muka) dan membolehkan kita memutar hanya kiub, jadi kita tidak perlu menghidupkan setiap muka secara berasingan.
2. Ia memaparkan unsur -unsur kanak -kanak mengikut kedudukan mereka dalam ruang 3D, tanpa mengira kedudukan mereka di Dom.

Terdapat tiga dataran dalam contoh ini - hijau, merah, dan biru. Nilai translateZ dari dataran hijau adalah 100px, yang bermaksud ia berada di hadapan dataran lain. The Blue Square mempunyai nilai translateZ -100px, yang bermaksud ia berada di belakang dataran lain.

Tetapi di Dom, perintah dataran adalah: hijau, merah, biru. Oleh itu, apabila transform-style ditetapkan ke flat (atau tidak ditetapkan sama sekali), dataran biru akan dipaparkan di bahagian atas dan dataran hijau akan berada di belakang kerana itulah perintah DOM. Walau bagaimanapun, jika kita menetapkan transform-style ke preserve-3d , ia akan diberikan mengikut kedudukannya dalam ruang 3D. Akibatnya, dataran hijau akan berada di depan dan dataran biru akan berada di belakang.

Animasi

Sekarang, mari kita menghidupkan kiub! Untuk membuat perkara lebih menarik, kami menambah animasi kepada ketiga -tiga paksi. Pertama, kami menambah harta animation ke .cube . Ia tidak akan melakukan apa -apa lagi, kerana kita belum menentukan kerangka utama animasi, tetapi apabila kita melakukannya, ia ada.

 Animasi: Cuberotate 10s Linear Infinite;

Sekarang adalah kerangka utama. Pada dasarnya kita mahu memutar kiub di sepanjang setiap paksi supaya kelihatan seperti ia bergolek di ruang angkasa.

 @keyframes cuberotate {
  dari {Transform: Rotatey (0Deg) RotateX (720Deg) Rotateez (0Deg); }
  kepada {transform: rotatey (360deg) rotatex (0deg) rotatez (360deg); }
}

Harta perspective sebenarnya adalah atribut yang memberikan kedalaman animasi, sama seperti kita melihat tatal kiub kiri dan kanan, dan ke hadapan dan ke belakang.

Tetapi sebelum itu, nilai atribut perspective adalah konsisten, dan begitu juga perspective-origin . Mari kita lihat bagaimana mengubah nilai -nilai ini mempengaruhi penampilan kiub.

Saya telah menambah tiga slider untuk contoh ini untuk membantu melihat bagaimana nilai yang berbeza mempengaruhi perspektif kiub:

• Slider di sebelah kiri menetapkan nilai harta perspective . Ingat, nilai ini menetapkan jarak ke satah objek, jadi semakin kecil nilai, semakin jelas kesan perspektif.
• Dua slider yang lain merujuk kepada harta perspective-origin . Slider kanan menetapkan asal pada paksi menegak, dari atas ke bawah, dan gelangsar bawah menetapkan asal pada paksi mendatar, dari kanan ke kiri.

Perhatikan bahawa perubahan ini mungkin tidak jelas apabila animasi berjalan, kerana kiub itu sendiri berputar, tetapi anda boleh mematikan animasi dengan mudah dengan mengklik butang Animasi Run.

Jangan ragu untuk mencuba nilai -nilai ini dan melihat bagaimana ia mempengaruhi penampilan kiub. Tidak ada nilai "betul", dan nilai -nilai ini berbeza mengikut item, kerana ia bergantung kepada animasi, saiz objek, dan kesan yang anda ingin capai.

Langkah seterusnya?

Sekarang bahawa anda mempunyai asas -asas atribut perspective dalam CSS, anda boleh menggunakan imaginasi dan kreativiti anda untuk membuat objek 3D dalam projek anda sendiri, menambah kedalaman dan keseronokan pada butang, menu, input dan apa sahaja yang anda ingin "memberi hidup kepada kehidupan".

Pada masa yang sama, anda boleh cuba membuat struktur kompleks dan animasi berasaskan perspektif untuk mengamalkan dan meningkatkan kemahiran anda, seperti ini, ini, ini, dan juga ini.

Saya harap anda suka membaca artikel ini dan mempelajari sesuatu yang baru dalam proses! Jangan ragu untuk meninggalkan komen untuk memberitahu saya apa yang anda fikirkan, atau jika anda mempunyai sebarang soalan mengenai perspektif atau topik lain dalam artikel ini, sila tinggalkan saya komen di Twitter.

Atas ialah kandungan terperinci Bagaimana perspektif CSS berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!