Sifat transformasi 3D CSS: transformasi dan perspektif

Sifat transformasi 3D CSS: transformasi dan perspektif, contoh kod khusus diperlukan

Sifat transformasi 3D CSS ialah teknik berkuasa yang boleh mencapai kesan visual yang menakjubkan dengan beberapa kod mudah. Antaranya, dua sifat yang paling biasa digunakan ialah transformasi dan perspektif.

1. Atribut Transform

Atribut transformasi digunakan untuk memutar, menskala, mencondongkan, menggerakkan dan operasi lain pada elemen. Ia boleh mencapai kesan yang berbeza dengan menetapkan parameter yang berbeza.

1. Putaran

Anda boleh memutar elemen dengan menetapkan parameter putar. Contohnya:

div {
  transform: rotate(45deg);
}

2. Skala

Anda boleh mencapai penskalaan elemen dengan menetapkan parameter skala. Contohnya:

div {
  transform: scale(1.5);
}

3. skew

Anda boleh condongkan elemen dengan menetapkan parameter senget. Contohnya:

div {
  transform: skew(30deg);
}

4. Move

Anda boleh mengalihkan elemen dengan menetapkan parameter terjemah. Contohnya:

div {
  transform: translate(100px, 50px);
}

2. Atribut perspektif

Atribut perspektif digunakan untuk menentukan titik cerapan dalam pemandangan tiga dimensi dan mempengaruhi kesan perspektif unsur. Ia boleh mengubah perspektif elemen dengan menetapkan parameter yang berbeza.

div {
  perspective: 800px;
}

Selepas menetapkan atribut perspektif, kita perlu menggunakan atribut gaya transformasi untuk menggunakan kesan perspektif pada elemen anak unsur tersebut.

div {
  perspective: 800px;
  transform-style: preserve-3d;
}

3. Aplikasi untuk Contoh

Berikut ialah contoh untuk menunjukkan cara menggunakan atribut transformasi dan perspektif untuk mencapai kesan kiub.

Kod HTML adalah seperti berikut:

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

Kod CSS adalah seperti berikut:

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  animation: spin 6s linear infinite;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
}

.right {
  transform: rotateY(90deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

Kod di atas melaksanakan kiub ringkas dan mencapai kesan putaran dan perspektif melalui sifat transformasi dan perspektif. Anda boleh menjalankan kod itu sendiri untuk melihat kesannya.

Ringkasnya, transformasi dan perspektif sifat transformasi 3D CSS ialah alat penting untuk mencipta kesan visual yang indah Dengan kod mudah, kami boleh mencapai pelbagai kesan animasi yang menarik dan meningkatkan daya tarikan visual halaman web.

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