Atoz CSS Screencast: The Rotatey CSS Transform

Tutorial ini meneroka transformasi CSS, membolehkan putaran 3D di sekitar paksi-y, sesuai untuk kesan seperti flip kad. Kami juga akan meliputi rotateY untuk rendering 3D yang betul dan sifat transform-style: preserve-3d dan perspective untuk mengawal sudut tontonan. perspective-origin

Konsep Utama:

• : berputar unsur -unsur di sekeliling paksi menegak (y) mereka. Sudut (dalam darjah, radian, dll.) Menentukan jumlah putaran. rotateY
• : penting untuk mewujudkan kesan 3D yang realistik. Digunakan untuk bekas induk, ia memastikan unsur -unsur kanak -kanak mengekalkan kedudukan 3D mereka dan bukannya meratakan. transform-style: preserve-3d
• : mensimulasikan jarak antara penonton dan elemen, mempengaruhi perspektif 3D. Nilai yang lebih tinggi meningkatkan jarak, menjadikan kesan 3D kurang jelas. perspective
• : menetapkan titik lenyap, mengawal pusat perspektif. Ia mengambil dua nilai: offset mendatar dan menegak. perspective-origin

Memahami ruang 3D dalam CSS:

CSS beroperasi dalam sistem koordinat 3D (x, y, z). Manakala

(dibincangkan kemudian) mengendalikan susunan susunan dalam Z-pesawat,

dan lain-lain mengubah elemen memanipulasi unsur-unsur dalam ruang 3D ini. z-index adalah penting untuk menggambarkan transformasi ini dengan tepat. rotateY transform-style: preserve-3d

putaran dengan

: rotateY berputar unsur-unsur di sekitar paksi-y. Nilai positif berputar mengikut arah jam, nilai negatif berlawanan arah jam. Contohnya:

Animating rotateY() mencipta kesan dinamik:

img {
  transform: rotateY(45deg);
}

Nota: Berputar 180 ° mungkin menunjukkan imej cermin. Gunakan rotateY untuk mengawal penglihatan muka belakang.

img {
  animation: spin 2s infinite linear;
}
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

Perspektif dan kedalaman: backface-visibility: hidden;

Hartanah pada bekas induk mensimulasikan jarak tontonan. Laraskan titik yang lenyap. Contoh:

perspective menggabungkan perspective-origin,

,

.container {
  perspective: 500px; /* Adjust this value for different perspective strengths */
  perspective-origin: 50% 50%; /* Centered vanishing point */
}

, dan animasi mencipta kesan 3D yang menarik.

rotateY transform-style: preserve-3d Soalan -soalan yang sering ditanya: perspective

Seksyen FAQ yang disediakan secukupnya merangkumi soalan -soalan biasa tentang , termasuk penggunaannya, gabungan dengan transformasi lain, animasi, keserasian pelayar, dan jenis unit. Tiada pengembangan lanjut diperlukan di sini.

Atas ialah kandungan terperinci Atoz CSS Screencast: The Rotatey CSS Transform. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!