css怎么让图片旋转90度


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!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>

实现效果:

30e8503a7db6cc73b5d15585db9afba.png

推荐教程:CSS教程

以上就是css怎么让图片旋转90度的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

css怎么设置阴影效果

css content属性怎么用

css网页乱码怎么办

如何使用css制作箭头符号

外联css怎么写

详解css处理长短文本内容的几种小技巧(值得收藏)

详解纯css实现多彩、智能阴影的方法

css文本对齐属性的取值有几种

css flex-direction属性怎么用

css怎么设置字体颜色

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...