Rumah  >  Artikel  >  hujung hadapan web  >  Apakah kod flip untuk elemen css3

Apakah kod flip untuk elemen css3

WBOY
WBOYasal
2021-12-15 11:57:401697semak imbas

Kod: 1. "transform:rotateY(angle)", anda boleh menetapkan gaya flip elemen di sepanjang paksi Y; 2. "transform:rotateX(angle)", anda boleh menetapkan gaya flip daripada elemen di sepanjang paksi X 3. "transform:rotateZ(angle)" boleh menetapkan gaya flip elemen di sepanjang paksi Z.

Apakah kod flip untuk elemen css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apakah kod flip elemen css3

Dalam css, jika anda ingin mencapai kesan flip elemen, anda perlu gunakan atribut transform.

Atribut transformasi akan menghasilkan kesan paparan flip yang berbeza apabila digunakan dengan fungsi yang berbeza.

1. Atribut transformasi bekerjasama dengan fungsi rotateY() untuk menetapkan elemen supaya terbalik di sepanjang paksi Y.

Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
  transform:rotateY(180deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="Apakah kod flip untuk elemen css3" >
<p>上面是沿着Y轴翻转180度,下面是原图</p>
<img  src="1118.02.png" alt="Apakah kod flip untuk elemen css3" >
</body>
</html>

Hasil keluaran:

Apakah kod flip untuk elemen css3

2. Atribut transformasi bekerjasama dengan fungsi rotateX(). untuk menetapkan elemen sepanjang X Axis terbalik.

Contoh adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
  transform:rotateX(180deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="Apakah kod flip untuk elemen css3" >
<p>上面是沿着X轴翻转180度,下面是原图</p>
<img  src="1118.02.png" alt="Apakah kod flip untuk elemen css3" >
</body>
</html>

Hasil keluaran:

Apakah kod flip untuk elemen css3

3 Atribut transformasi bekerjasama dengan fungsi rotateZ(). untuk menetapkan elemen sepanjang Paksi Z terbalik.

Contoh adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
  transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="Apakah kod flip untuk elemen css3" >
<p>上面是沿着X轴翻转180度,下面是原图</p>
<img  src="1118.02.png" alt="Apakah kod flip untuk elemen css3" >
</body>
</html>

Hasil keluaran:

Apakah kod flip untuk elemen css3

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Apakah kod flip untuk elemen css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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