Transformasi CSS: bagaimana untuk mencapai kesan putaran elemen

Transformasi CSS: Bagaimana untuk mencapai kesan putaran elemen memerlukan contoh kod khusus

Dalam reka bentuk web, kesan animasi adalah salah satu cara penting untuk meningkatkan pengalaman pengguna dan menarik perhatian pengguna, dan animasi putaran adalah salah satu yang lebih yang klasik. Dalam CSS, anda boleh menggunakan atribut "transform" untuk mencapai pelbagai kesan ubah bentuk elemen, termasuk putaran. Artikel ini akan memperkenalkan secara terperinci cara menggunakan "transform" CSS untuk mencapai kesan putaran elemen, dan memberikan contoh kod khusus.

1. Cara menggunakan "transform" CSS untuk mencapai kesan putaran elemen

Atribut "transform" CSS ialah API teras untuk putaran, pergerakan, penskalaan, senget dan kesan ubah bentuk lain bagi elemen satu unsur atau Satu set unsur. Untuk mencapai kesan putaran elemen, cuma tetapkan nilai atribut "transform" kepada "putar (nilai sudut)", dengan "nilai sudut" ialah nilai dalam darjah, yang boleh menjadi nombor positif, nombor negatif , atau perpuluhan. Untuk elemen yang diputar, pusat putarannya lalai ke titik tengah elemen.

Berikut ialah format sintaks atribut "transform":

transform: none|transform-functions;

Antaranya, "none" bermaksud tiada transformasi, dan "transform-functions" ialah gabungan pelbagai fungsi transformasi tertentu. Untuk kesan putaran, kita hanya perlu menggunakan fungsi transformasi "putar ()".

Berikut ialah pelaksanaan kod khusus:

.rotate {
  transform: rotate(30deg); /* 旋转30度 */
}

Dalam contoh di atas, ".rotate" ialah nama kelas CSS, yang boleh digunakan pada semua elemen dalam dokumen HTML yang memerlukan kesan putaran. Di sini elemen diputar 30 darjah.

Selain menggunakan fungsi "putar()" untuk mencapai kesan putaran secara bebas, kami juga boleh menggunakannya dalam kombinasi dengan fungsi ubah bentuk lain untuk mencapai kesan yang lebih kompleks. Contohnya, kod berikut memutarkan elemen 30 darjah dan menskalakannya pada masa yang sama:

.rotate-scale {
  transform: rotate(30deg) scale(1.5);
}

2. Contoh kod khusus

Berikut ialah beberapa contoh kod khusus yang membolehkan pembaca memahami dengan lebih baik cara menggunakan "transform" CSS kepada melaksanakan unsur-unsur.

Contoh 1: Putaran asas

Kod HTML:

<div class="rotate-box">
  <img src="/static/imghw/default1.png"  data-src="img/logo.png"  class="lazy" alt="">
</div>

Kod CSS:

.rotate-box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(30deg);
}

Dalam contoh ini, kami mentakrifkan kelas "kotak putar" yang mengandungi bekas 200 × 200 piksel dan imej. Dengan menetapkan sifat "justify-content" dan "align-item", kami memusatkan imej. Kemudian, gunakan sifat "transform" untuk memutarkan bekas 30 darjah.

Contoh 2: Putaran berbilang grafik

Kod HTML:

<div class="rotate-container">
  <div class="rotate-box box-1"></div>
  <div class="rotate-box box-2"></div>
  <div class="rotate-box box-3"></div>
</div>

Kod CSS:

.rotate-container {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 0 auto;
}

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #009688;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

.box-1 {
  transform: rotate(45deg);
}

.box-2 {
  transform: rotate(135deg);
}

.box-3 {
  transform: rotate(225deg);
}

Dalam contoh ini, kami mentakrifkan bekas "bekas putar", dan kemudian menentukan 3 putaran berbeza dalam grafik bekas. Dengan menetapkan sifat "kedudukan", grafik ini boleh bertindih antara satu sama lain, dan sifat "transform-origin" boleh menjadikan pusat putaran grafik di tengah tepat grafik. Akhir sekali, dengan menetapkan atribut "transformasi" yang berbeza masing-masing bagi setiap grafik, kesan putaran pada sudut yang berbeza dicapai.

Contoh 3: Animasi putaran tak terhingga

Kod HTML:

<div class="rotate-box"></div>

Kod CSS:

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #3f51b5;
  animation-name: rotate-animation;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Dalam contoh ini, kami menggunakan sifat animasi CSS untuk mencapai kesan putaran tak terhingga. Kami mentakrifkan elemen yang dipanggil "rotate-box" dan menetapkan kata kunci animasi (seperti "animasi-name") kepada jenis "rotate-animation". Kemudian, keadaan berbeza semasa proses animasi ditakrifkan melalui peraturan "@keyframes", termasuk perubahan dalam sudut putaran daripada 0 darjah kepada 360 darjah.

Melalui tiga contoh kod di atas, pembaca boleh menguasai kaedah berbeza menggunakan atribut "transform" CSS untuk mencapai kesan putaran. Dalam pembangunan sebenar, kaedah ini boleh digabungkan secara fleksibel dan diselaraskan mengikut keperluan khusus projek.

Atas ialah kandungan terperinci Transformasi CSS: bagaimana untuk mencapai kesan putaran elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!