css中如何才可以让图片旋转90度

这篇文章主要介绍了css中如何才可以让图片旋转90度,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

css让图片旋转90度的方法:利用变换属性来进行图片旋转,如【变换:旋转(90度)】.transform属性用于元素的2 d或3 d转换,该属性允许我们将元素旋转,缩放,移动,倾斜。

属性介绍:

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

语法:

变换:没有|转换函数;

属性值:

<李>

没有,,定义不进行转换。

<李>

翻译(x, y),,定义二维转换。

<李>

translate3d (x, y, z),,定义3 d转换。

<李>

translateX (x),,定义转换,只是用X轴的值。

<李>

translateY (y),,定义转换,只是用Y轴的值。

<李>

translateZ (z),,定义3 d转换,只是用Z轴的值。

代码实现:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf-8"祝辞 　　& lt; style> 　　身体 　　{ 　　保证金:30 px; 　　background - color: # E9E9E9; 　　} 　　 　　div.polaroid 　　{ 　　宽度:294 px; 　　填充:10 px 10 px 20 px 10 px; 　　边界:1 px固体# BFBFBF; 　　背景颜色:白色;/*添加不必*/不必:2 px 2 px 3 px # aaaaaa; 　　} 　　 　　div.rotate 　　{ 　　-ms-transform:旋转(90度);/* IE 9 */-webkit-transform:旋转(90度);/* Safari和Chrome */变换:旋转(90度); 　　} 　　 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div类=皃olaroid"祝辞 　　正常图片 　　https://www.yisu.com/zixun/& lt; img src=" img/1. jpg”alt="宽度=" 284 "高度=" 213 ">