transform-origin是规定如何旋转
: center center;为以围绕中心点旋转;
top left以围绕左上角旋转;
top right以围绕右上角旋转;
使用CSS3 transform 属性设置元素旋转。定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
语法:transform: none|transform-functions
实例 旋转 div 元素:
div
{
transform:rotate(7deg)
-ms-transform:rotate(7deg)/* IE 9 */
-moz-transform:rotate(7deg)/* Firefox */
-webkit-transform:rotate(7deg)/* Safari 和 Chrome */
-o-transform:rotate(7deg)/* Opera */
}
浏览器支持
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。
一、CSS中鼠标悬停到元素上顺时针转360deg可以使用transition和transform这两个属性;二、正常情况下,transition是加到设置元素样试的CSS中的,而transform是添加到动态伪类选择器:hover后的
三、如果要实现鼠标悬停后元素旋转360不回去,可将transition也加到:hover后面
举例:
<style>
.bg{
width: 200px
height: 200px
margin: 10px
box-shadow: 0 1px 8px #666
}
.bg:hover{
transition: all 0.5s ease-in
transform:rotate(360deg)
}
</style>
<div class="bg"></div>
不知道是不是你要的效果,望采纳!!!