CSS 图片可以实现旋转吗? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在 CSS 中, 可以给图片添加 transform:rotate() 来实现图片旋转.
transform 属性应用于元素的 2D 或 3D 转换. 这个属性允许你将元素旋转, 缩放, 移动, 倾斜等.
而, rotate(angle) 定义 2D 旋转, 在参数中规定角度.
示例:
- <!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>
效果图:
鼠标放在图片上, 旋转 180 度, 可用在头像上
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16976.html