What is the image flip attribute in css-CSS Tutorial-php.cn

What is the image flip attribute in css

王林

Release： 2023-02-17 16:37:46

Original

3025 people have browsed it

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().

What is the image flip attribute in css

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;

Copy after login

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>

Copy after login

Running results:

What is the image flip attribute in css

(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!