Removing inherited 3d css transform

Question

let's say I have a parent container that is set to

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

and inside it there are a number of elements in which I do not want to have this style. What do I need to do? set conversion values ​​to 0? as

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

I have a jsfiddle example here: http://jsfiddle.net/8cUPL/1/

Answer 1

Do you want the elements to behave as if they were not part of a promising container at all? No, It is Immpossible.

You can, however, use a little Javascript to take elements from the container and put them elsewhere in the DOM tree. Then they will be free from 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 2

transform-* properties, such as opacity and some other rendering-related properties, do not inherit the inheritance value in CSS. Instead, they apply visual changes to the element as a whole, including all its descendants. Apply something like transform: none; these descendants have no visible effect, it only means that these elements do not transform on their own, but they are still converted with the parent element - not because they inherit its style, but because they are part of its appearance.

The only way to visually “cancel” the transformation of the parent element for the descendant (that is, to make it look like it is not transformed) is to specifically convert it so that the result of this transformation looks from this point of view the same as it would look without transformation at all. To make this possible, the transformed element itself and all intermediate ancestors of this element must have transform-style: preserve-3d . The necessary “compensating” transformation can be calculated from the resulting three-dimensional scene or simply constructed by adjusting the transformation values ​​through trial and error, for example.

 .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 fix the overflowed parts of the transformed element and "cancel" the transformation of its part at the same time, the only solution that is right for you is to organize the code so that this part is not a descendant of the transformed element anymore.

Answer 3

perspective and -origin don't actually do anything on their own. To remove a transform of a child only reset its transform as follows:

 transform: none;