Sifat transformasi 3D CSS: transformasi dan perspektif

王林
Lepaskan: 2023-10-26 08:54:30
asal
1394 orang telah melayarinya

CSS 3D 变换属性:transform 和 perspective

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);
}
Salin selepas log masuk
  1. Skala

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

div {
  transform: scale(1.5);
}
Salin selepas log masuk
  1. skew

Anda boleh condongkan elemen dengan menetapkan parameter senget. Contohnya:

div {
  transform: skew(30deg);
}
Salin selepas log masuk
  1. Move

Anda boleh mengalihkan elemen dengan menetapkan parameter terjemah. Contohnya:

div {
  transform: translate(100px, 50px);
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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>
Salin selepas log masuk

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);
  }
}
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan