Removing inherited css 3d transform - css

Question

let's say i have a parent container which is set to
-webkit-transform: perspective(300px) rotateX(45deg);
-webkit-transform-origin: 50% 100% 0%;
and inside it is a number of items in which i don't want to have that styling.
what do i have to do? set its transform values to 0? like
-webkit-transform: perspective(0px) rotateX(0deg);
-webkit-transform-origin: 0% 0% 0%;
i have a sample jsfiddle here : http://jsfiddle.net/8cUPL/1/

Answer 1

The transform-* properties, like opacity and some other rendering-related ones, don't 'inherit' in CSS meaning of inheritance. Instead, they apply the visual changes to the element as a whole, including all its descendants. Applying something like transform: none; to these descendants doesn't have any visible effect, it means only that these elements are not transformed by themselves, but they still are transformed with the parent element — not because they 'inherit' its style, but because they are parts of its appearance.
The only way to visually 'undo' the transform of the parent element for a descendant (i.e. make it look as non-transformed) is to specifically transform it so that the result of this transform would look from the given perspective the same as it would look without transform at all. To make this possible, the transformed element itself and all intermediate ancestors of the given element must have transform-style: preserve-3d. The needed 'compensating' transform can be calculated from the resulting 3D scene or just be constructed by adjusting transform values through trial and error, e.g.
.items{
...
transform: translate3d(-51px, 11px, 29px) rotateX(-45deg);
transform-origin: 50% 100% 0px;
}
(see JSfiddle).
Unfortunately, this workaround is not compatible with overlow:hidden because it (along with some other properties) effectively removes transform-style: preserve-3d. So, if you need to clip the overflowed parts of the transformed element and to 'undo' the transform of its part in the same time, the only solution suitable for you would be to organize the code so that this part would not be the descendant of the transformed element anymore.

Answer 2

You mean you want the items to behave as if they are not part of the perspectived container at all? No, that is not possible.
You can, however, use a bit of Javascript to take the items of out the container and put them elsewhere in the DOM tree. Then they will be free of the perspective.
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 3

The perspective and its -origin don't actually do anything on their own.
To remove the transform of a child element just reset its transform like so:
transform: none;