下面通过实例来介绍一下。
鼠标放在图片上 旋转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-600" alt=""/>
</body>
</html>更多web前端开发知识，请查阅 HTML中文网 ！！
以上就是css怎么旋转图片吗？的详细内容，更多请关注0133技术站其它相关文章！
