css怎么让图片旋转90度?

css怎么让图片旋转90度?下面本篇文章给大家介绍一下使用CSS让图片旋转90度的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css怎么让图片旋转90度?

在CSS中,可以使用transform: rotate(90deg);来让图片旋转90度。

transform属性应用于元素的2D或3D转换,这个属性允许你将元素旋转,缩放,移动,倾斜等。

而rotate(angle)用于定义 2D 旋转,在angle参数中规定角度。

deg是CSS中的一个角度单位,表示度(Degress),一个圆共360度。

示例:

<!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.webp" alt="" width="284" height="213">
</div><br><br>
<div class="polaroid rotate">
	图片旋转90度
<img src="img/1.webp" alt="" width="284" height="213">
</div>


</body>
</html>

效果图:

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css怎么让图片旋转90度?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读