Home >Web Front-end >CSS Tutorial >Can css images be rotated?
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.
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)
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>Rendering:
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!