7

假设我有一个父容器设置为

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

4

3 回答 3

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因为它（连同其他一些属性）有效地删除了transform-style: preserve-3d. 因此，如果您需要剪辑转换元素的溢出部分并同时“撤消”其部分的转换，唯一适合您的解决方案是组织代码，使这部分不是后代转换后的元素了。

于 2017-01-06T13:16:32.373 回答
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);
}

小提琴

于 2013-08-14T07:50:48.397 回答
0

theperspective和它-origin实际上并没有自己做任何事情。要删除子元素的变换，只需transform像这样重置它：

transform: none;
于 2017-01-06T09:34:25.293 回答