Apakah kod flip untuk elemen css3-tutorial css-php.cn

Apakah kod flip untuk elemen css3

WBOY

Lepaskan： 2021-12-15 11:57:40

asal

1715 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Hasil keluaran:

Apakah kod flip untuk elemen css3