防止孩子在CSS中继承旋转变换 [英] Prevent children from inheriting rotate transformation in CSS

问题描述

我正在执行一个CSS变换：旋转父对象，但希望能够否定这个效果对一些孩子 - 是可能的，而不使用反向旋转？

I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation?

反向旋转起作用，但它会影响元素的位置，并且可能会对性能产生负面影响（？）。在任何情况下，它看起来不像一个干净的解决方案。

Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution.

我尝试了transform：none建议从这个问题防止孩子继承转换cs3 ，但它根本不工作 - 请看这里的小提琴：http://jsfiddle.net/NPC42/XSHmJ/

I tried the "transform: none" suggestion from this question prevent children from inheriting transformation cs3, yet it simply doesn't work - please see the fiddle here: http://jsfiddle.net/NPC42/XSHmJ/

推荐答案

我相信你需要使用第二个孩子来伪造它，这个规范似乎不允许你想要的行为，我可以理解为什么子元素的位置必须是

I believe that you are going to need to fake it using a second child, the spec does not seem to allow for the behaviour you would like, and I can understand why the position of a child element has to be affected by a transform to it's parent.

这不是最优雅的解决方案，但我想你正在努力做一些规范永远不会去的允许。看看下面的小提琴为我的解决方案：

This isn't the most elegant of solutions, but I think you're trying to do something that the spec is never going to allow. Take a look at the following fiddle for my solution:

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

这篇关于防止孩子在CSS中继承旋转变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！