css让图片旋转90度的方法:利用transform属性来进行图片旋转,如【transform:rotate(90deg)】。transform属性用于元素的2d或3d转换,该属性允许我们将元素旋转、缩放、移动、倾斜。
属性介绍:
transform属性应用于元素的2d或3d转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
(学习视频推荐:css视频教程)
语法:
transform: none|transform-functions;
属性值:
none 定义不进行转换。
translate(x,y) 定义 2d 转换。
translate3d(x,y,z) 定义 3d 转换。
translatex(x) 定义转换,只是用 x 轴的值。
translatey(y) 定义转换,只是用 y 轴的值。
translatez(z) 定义 3d 转换,只是用 z 轴的值。
代码实现:
<!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" height="213"></div><br><br><div class="polaroid rotate"> 图片旋转90度<img src="img/1.jpg" alt="" width="284" height="213"></div></body></html>
实现效果:
推荐教程:css教程
以上就是css怎么让图片旋转90度的详细内容。