移除继承的CSS 3D变换

Question

假设我有一个父级容器，它被设置为

-webkit-transform: perspective(300px) rotateX(45deg);
-webkit-transform-origin: 50% 100% 0%;

在其中有一些项目，我不想使用这种样式。我该怎么办？将其转换值设置为0吗？就像这样：

 -webkit-transform: perspective(0px) rotateX(0deg);
-webkit-transform-origin: 0% 0% 0%;

我有一个示例jsfiddle网页：http://jsfiddle.net/8cUPL/1/

- user1971075

Answer 1

transform-*属性，如opacity和其他一些与渲染相关的属性，在CSS中并不具有继承的意义。相反，它们将视觉变化应用于整个元素，包括其所有后代元素。对这些后代元素应用像transform: none;这样的内容没有任何可见效果，它仅表示这些元素本身不进行转换，但仍随父元素一起进行转换，这不是因为它们 '继承'了其样式，而是因为它们是其外观的一部分。

唯一的方式来在后代元素中视觉上“撤消”父元素的转换（即使其看起来不是转换后的）是明确地对其进行转换，以便此转换的结果从给定的透视图中看起来与没有进行转换时完全相同。为实现此目的，转换元素本身和给定元素的所有中间祖先必须具有transform-style: preserve-3d。所需的“补偿”转换可以从生成的3D场景中计算出，也可以通过通过试错调整转换值来构建，例如：

.items{
    ...
    transform: translate3d(-51px, 11px, 29px) rotateX(-45deg);
    transform-origin: 50% 100% 0px;
}

(请参见JSfiddle。)

不幸的是，这种解决方法与overlow:hidden不兼容，因为它（连同其他一些属性）有效地删除了transform-style: preserve-3d。因此，如果您需要剪切变换元素的溢出部分并同时“撤消”其部分的变换，则适合您的唯一解决方案是组织代码，使该部分不再是变换元素的后代。

- Ilya Streltsyn

Answer 2

你的意思是希望这些元素看起来像根本不是容器的一部分吗？不，那不可能。

不过，你可以使用一点Javascript将这些元素从容器中取出并放置在DOM树的其他位置。然后它们就不会受到透视的影响了。

var container = document.getElementById('container');
var items = container.getElementsByClassName('items');
for (var i = items.length-1; i>=0; --i) {
    var el = items[i].cloneNode(true);
    var itemparent = items[i].parentNode;
    itemparent.removeChild(items[i]);
    container.parentNode.insertBefore(el, container);
}

小提琴

- Mr Lister

Answer 3

perspective 和 -origin 本身并没有实际作用。要移除子元素的变换，只需重置其 transform，如下所示：

transform: none;

- RecursiveExceptionException