How to rotate an image 90 degrees in css: Use the transform attribute to rotate the image, such as [transform:rotate(90deg)]. The transform attribute is used for 2D or 3D transformation of elements. This attribute allows us to rotate, scale, move, and tilt the element.
Property introduction:
The Transform property is applied to the 2D or 3D transformation of the element. This property allows you to rotate, scale, move, tilt, etc. the element.
(Learning video recommendation: css video tutorial)
Grammar:
transform: none|transform-functions;
Attribute value:
none The definition is not converted.
translate(x,y) Define 2D transformation.
translate3d(x,y,z) Define 3D transformation.
translateX(x) Defines the transformation, just using the X-axis value.
translateY(y) Defines the transformation, just using the Y-axis value.
translateZ(z) Defines a 3D transformation, just using the Z axis value.
Code implementation:
<!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
{
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
transform:rotate(90deg);
}
</style>
</head>
<body>
<div class="polaroid">
正常图片
<img src="img/1.jpg" alt="" width="284" style="max-width:90%">
</div><br><br>
<div class="polaroid rotate">
图片旋转90度
<img src="img/1.jpg" alt="" width="284" style="max-width:90%">
</div>
</body>
</html> Implementation effect:
Recommended tutorial: CSS Tutorial
The above is the detailed content of How to rotate an image 90 degrees with css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
