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:401568browse

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:

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>

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>

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!

html5 css css3 transform

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to remove input cursor in css3Next article：How to remove input cursor in css3

See more

What is the flip code for css3 elements

Related articles