Tafsiran sifat paparan 3D CSS: transformasi dan perspektif

Tafsiran sifat paparan 3D CSS: transformasi dan perspektif, contoh kod khusus diperlukan

Pengenalan:
Dalam reka bentuk web moden , kesan 3D telah menjadi elemen yang sangat popular. Melalui sifat transformasi dan perspektif CSS, kami boleh menambahkan kesan visual 3D dengan mudah pada halaman web untuk menjadikannya lebih jelas dan menarik. Artikel ini akan menerangkan kedua-dua sifat ini dan memberikan contoh kod khusus.

1. Atribut Transform:
Atribut transformasi ialah atribut yang sangat berkuasa dalam CSS. Ia boleh merealisasikan pelbagai operasi transformasi seperti putaran, penskalaan, pergerakan dan kecondongan elemen. Dalam paparan 3D, kita boleh menggunakan atribut transform untuk mengubah elemen dalam ruang 3D.

Berikut ialah beberapa fungsi transformasi yang biasa digunakan:

1. Putaran:
   transform: rotateX(45deg); // Putar 45 darjah di sekeliling X paksi# 🎜🎜#transform: rotateY(45deg); // Putar 45 darjah mengelilingi paksi Y
   transform: rotateZ(45deg); // Putar 45 darjah mengelilingi paksi Z
   
Skala : #🎜🎜 #transform: skala(2); // Zum masuk dua kali pada paksi X dan Y
2. transform: scaleX(2); // Zum masuk dua kali pada paksi X
   transform: skalaY (2); // Zum masuk dua kali pada paksi Y
   
   Gerakkan:
transform: translateX(100px); // Gerakkan 100 piksel pada paksi X
3. transform: translateY (100px); // Gerakkan 100 piksel pada paksi Y
   transform: translateZ(100px); // Gerakkan 100 piksel pada paksi Z
   
   skew:
transform: skew (45deg); // Condong 45 darjah sepanjang kesan transformasi 3D. Contohnya, kita boleh menggunakan putaran, penskalaan dan pergerakan untuk mencipta kiub 3D:

4. <div class="cube">
     <div class="face front">Front</div>
     <div class="face back">Back</div>
     <div class="face left">Left</div>
     <div class="face right">Right</div>
     <div class="face top">Top</div>
     <div class="face bottom">Bottom</div>
   </div>

   .cube {
     width: 200px;
     height: 200px;
     position: relative;
     transform-style: preserve-3d;
   }
   
   .face {
     position: absolute;
     width: 200px;
     height: 200px;
     background-color: rgba(0, 0, 0, 0.5);
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
   }
   
   .front {
     transform: translateZ(100px);
   }
   
   .back {
     transform: translateZ(-100px) rotateY(180deg);
   }
   
   .left {
     transform: translateX(-100px) rotateY(-90deg);
   }
   
   .right {
     transform: translateX(100px) rotateY(90deg);
   }
   
   .top {
     transform: translateY(-100px) rotateX(90deg);
   }
   
   .bottom {
     transform: translateY(100px) rotateX(-90deg);
   }

   
   Kod ini akan mencipta kiub 200x200 piksel dengan warna latar belakang hitam lut sinar pada semua sisi. Transformasi setiap muka dalam ruang 3D boleh dicapai melalui atribut transformasi. Contohnya, dengan memberikan salah satu muka translateZ(100px), anda boleh mengalihkannya ke hadapan 100 piksel berbanding sudut pandangan, sekali gus membentuk muka hadapan kubus.
   
2. Atribut perspektif:

Atribut perspektif digunakan untuk menetapkan kesan perspektif elemen Dengan menetapkan kedudukan dan jarak cerapan titik perspektif, ia boleh menjejaskan prestasi Kesan transformasi 3D. Perspektif juga perlu digunakan dengan atribut transformasi.

Anda boleh menetapkan atribut perspektif untuk menjadikan elemen menghasilkan kesan jauh dan dekat dalam ruang 3D. Contohnya:

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
  perspective: 1000px;
}

Dalam contoh ini, dengan menetapkan perspektif: 1000px, kami memberikan elemen kesan jauh dan dekat sebanyak 1000 piksel. Anda boleh melaraskan jarak elemen dalam ruang 3D dengan menukar nilai perspektif.

Ringkasan:

Dengan menggunakan sifat transformasi dan perspektif CSS, kami boleh menambah kesan 3D pada halaman web dengan mudah. Atribut transformasi boleh melaksanakan operasi transformasi seperti putaran, penskalaan, pergerakan dan kecondongan elemen dalam ruang 3D. Atribut perspektif boleh mengawal kesan perspektif elemen dalam ruang 3D. Dengan menggabungkan kedua-duanya, kami dapat mencipta pelbagai jenis kesan 3D.

Rujukan:

CSS Transform (https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)#🎜 🎜 #
CSS Perspective (https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective)

(Nota: Kod contoh di atas ialah sahaja Untuk menunjukkan kesannya, aplikasi sebenar perlu diselaraskan mengikut keperluan khusus)

Atas ialah kandungan terperinci Tafsiran sifat paparan 3D CSS: transformasi dan perspektif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!