删除继承的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/

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);
}

小提琴