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/

Answer 1

您的意思是您希望项目的行为就像它们根本不属于透视容器一样？不，那是不可能的。

但是，您可以使用一些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);
}

Fiddle

Answer 2

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不兼容，因为它（以及some other properties）有效删除了transform-style: preserve-3d。因此，如果您需要剪切变换元素的溢出部分并同时“撤消”其部分的变换，那么适合您的唯一解决方案是组织代码，以便此部分不是后代变形元素了。

Answer 3

perspective及其-origin实际上并没有做任何事情。要删除子元素的变换，只需重置其transform，如下所示：

transform: none;

删除继承的css 3d变换

3 个答案: