Home > Article > Web Front-end > What is the image flip attribute in css
What is the image flip attribute in css
- 王林Original
- 2021-03-03 11:58:253020browse
The image flip attribute in css is transform. The transform attribute is applied to the 2D or 3D transformation of the element. You can use this attribute to rotate, move, tilt and other operations on the element. The syntax is "transform: none|transform-functions;"; the flip functions supported by transform include rotate(), rotate3d( ), rotateX(), rotateY(), rotateZ().
The operating environment of this article: windows10 system, CSS3&&HTML5, thinkpad t480 computer.
css3 provides us with a new attribute transform, using which we can move, rotate, tilt and other operations on elements.
transform attribute introduction:
The Transform attribute is applied to the 2D or 3D transformation of the element. This property allows you to rotate, scale, move, tilt, etc. the element.
Syntax:
transform: none|transform-functions;
Commonly used flip attribute values:
rotate(angle) Define 2D rotation, specified in the parameters angle.
rotate3d(x,y,z,angle) Define 3D rotation.
rotateX(angle) Defines a 3D rotation along the X-axis.
rotateY(angle) Defines 3D rotation along the Y axis.
rotateZ(angle) Defines 3D rotation along the Z axis.
Specific code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html> Running results:
(Learning video sharing : css video tutorial)
The above is the detailed content of What is the image flip attribute in css. For more information, please follow other related articles on the PHP Chinese website!