CSS 可以旋转图片吗? 怎么旋转图片? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
下面通过实例来介绍一下.
鼠标放在图片上 旋转 180 度 可用在头像上 比较俏皮 效果如下:
代码如下:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- div,img,body{ margin: 0; padding: 0; } img.touxiang:hover{ transform:
- rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
- -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } img.touxiang{
- margin: 0 auto; display: block; transition: all 0.2s ease-in-out; -webkit-transition:
- all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition:
- all 0.2s ease-in-out; border-radius:100%; }
- </style>
- </head>
- <body>
- <br>
- <br>
- <br>
- <br>
- <img src="touxiang.jpg" alt="" />
- </body>
- </HTML>
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17628.html