Home > Article > Web Front-end > What is the flip code for css3 elements
What is the flip code for css3 elements
- WBOYOriginal
- 2021-12-15 11:57:401695browse
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.
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>Output result:
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>Output result:
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>Output result:
(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!