html咋样给图形加旋转效果,css图片可以实现旋转吗？

css图片可以实现旋转吗？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css图片可以实现旋转吗？

在CSS中，可以给图片添加transform:rotate()来实现图片旋转。

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

而，rotate(angle)定义 2D 旋转，在参数中规定角度。

示例：

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%;

}

效果图：

鼠标放在图片上，旋转180度，可用在头像上

更多web前端开发知识，请查阅 HTML中文网 ！！