设置后代:
.children1,
.children2,
.childrenN {
-moz-transform: none
-webkit-transform: none
-o-transform: none
-ms-transform: none
transform: none
}
或者让后代反向操作,比如反向旋转:
.parent {
position: relative
background-color: yellow
width: 200px
height: 150px
margin: 70px
-webkit-transform: rotate(30deg)
-moz-transform: rotate(30deg)
-o-transform: rotate(30deg)
-ms-transform: rotate(30deg)
transform: rotate(30deg)
}
.child {
position: absolute
top: 30px
left: 50px
background-color: green
width: 70px
height: 50px
-webkit-transform: rotate(-30deg)
-moz-transform: rotate(-30deg)
-o-transform: rotate(-30deg)
-ms-transform: rotate(-30deg)
transform: rotate(-30deg)
}
一、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>
不知道是不是你要的效果,望采纳!!!