我正在执行 CSS 转换:在父级上旋转,但希望能够对某些子级进行否定 - 是否可以不使用反向旋转?
反向旋转确实有效,但它会影响元素的位置,并且可能会对性能产生负面影响(?)。无论如何,它看起来都不是一个干净的解决方案。
我尝试了这个问题的“transform:none”建议防止孩子继承转换 css3,但它根本不起作用 - 请在此处查看小提琴:http: //jsfiddle.net/NPC42/XSHmJ/
我正在执行 CSS 转换:在父级上旋转,但希望能够对某些子级进行否定 - 是否可以不使用反向旋转?
反向旋转确实有效,但它会影响元素的位置,并且可能会对性能产生负面影响(?)。无论如何,它看起来都不是一个干净的解决方案。
我尝试了这个问题的“transform:none”建议防止孩子继承转换 css3,但它根本不起作用 - 请在此处查看小提琴:http: //jsfiddle.net/NPC42/XSHmJ/
可能你必须这样写:
.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);
}
检查更多http://jsfiddle.net/XSHmJ/1/
更新:
您可以:after & :before
为此使用伪类。
我相信您将需要使用第二个孩子来伪造它,规范似乎不允许您想要的行为,我可以理解为什么子元素的位置必须受到对其的转换的影响父母。
这不是最优雅的解决方案,但我认为您正在尝试做一些规范永远不会允许的事情。看看我的解决方案下面的小提琴:
.parent {
position: relative;
width: 200px;
height: 150px;
margin: 70px;
}
.child1 {
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.child2 {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
如果您想在不影响其子级的情况下对父级应用变换效果,您可以简单地为父级的伪元素设置动画,如下所示:
.parent {
display: inline-block;
position: relative;
}
.parent::before {
content: "";
background: #fab;
/* positioning / sizing */
position: absolute;
left: 0;
top: 0;
/*
be aware that the parent class have to be "position: relative"
in order to get the width/height's 100% working for the parent's width/height.
*/
width: 100%;
height: 100%;
/* z-index is important to get the pseudo element to the background (behind the content of parent)! */
z-index: -1;
transition: 0.5s ease;
/* transform before hovering */
transform: rotate(30deg) scale(1.5);
}
.parent:hover::before {
/* transform after hovering */
transform: rotate(90deg) scale(1);
}
这实际上对我有用。JSFiddle