Can css images be rotated?-CSS Tutorial-php.cn

Can css images be rotated?

藏色散人

Release： 2022-12-30 11:11:37

Original

3906 people have browsed it

css images can be rotated; in CSS, you can use the transform attribute and set the value to "rotate(angle)", "rotate3d(x,y,z,angle)", "rotateX(angle)" or "rotateY(angle)" and so on can be used to rotate the image.

Can css images be rotated?

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

Recommended: css video tutorial

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: rotate(angle)|rotate3d(x,y,z,angle)|rotateX(angle)|rotateY(angle)|rotateZ(angle)

Copy after login

rotate(angle): Define 2D rotation, specify the angle in the parameter.

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 a 3D rotation along the Z axis.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
transform:rotate(7deg);
}
div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
transform:rotate(-8deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="pulpitrock.jpg" alt="" width="284"    style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
<div class="polaroid rotate_right">
<img src="cinqueterre.jpg" alt="" width="284"    style="max-width:90%">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>
</body>
</html>

Copy after login

Rendering:

Can css images be rotated?

The above is the detailed content of Can css images be rotated?. For more information, please follow other related articles on the PHP Chinese website!