What is the flip code for css3 elements-CSS Tutorial-php.cn

What is the flip code for css3 elements

WBOY

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

Original

1681 people have browsed it

Code: 1. "transform:rotateY(angle)", you can set the flip style of the element along the Y axis; 2. "transform:rotateX(angle)", you can set the flip style of the element along the X axis; 3. "transform:rotateZ(angle)" can set the flip style of the element along the Z axis.

What is the flip code for css3 elements

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the flip code of css3 elements

In css, if you want to achieve the flip effect of elements, you need to use the transform attribute.

The transform attribute will produce different flip display effects when used with different functions.

1. The transform attribute cooperates with the rotateY() function to set the element to flip along the Y axis.

The example is as follows:

<!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="What is the flip code for css3 elements" >
<p>上面是沿着Y轴翻转180度，下面是原图</p>
<img  src="1118.02.png" alt="What is the flip code for css3 elements" >
</body>
</html>

Copy after login

Output result:

What is the flip code for css3 elements

2. The transform attribute cooperates with the rotateX() function to set the element to flip along the X axis .

The example is as follows:

<!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="What is the flip code for css3 elements" >
<p>上面是沿着X轴翻转180度，下面是原图</p>
<img  src="1118.02.png" alt="What is the flip code for css3 elements" >
</body>
</html>

Copy after login

Output result:

What is the flip code for css3 elements

3. The transform attribute cooperates with the rotateZ() function to set the element to flip along the Z axis. .

The example is as follows:

<!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="What is the flip code for css3 elements" >
<p>上面是沿着X轴翻转180度，下面是原图</p>
<img  src="1118.02.png" alt="What is the flip code for css3 elements" >
</body>
</html>

Copy after login

Output result:

What is the flip code for css3 elements

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the flip code for css3 elements. For more information, please follow other related articles on the PHP Chinese website!