css 怎么去掉transform

html-css012

css 怎么去掉transform,第1张

解决方案1:

设置后代:

.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>

不知道是不是你要的效果,望采纳!!!