Menu
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/
674
The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
transform-style: preserve-3d tells the browser that the 3D transformed children of the element it's set on shouldn't be flattened into the plane of their parent (the element we set transform-style: preserve-3d on).
The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. To better understand the transform-origin property, view a demo.
If flattened, the element's children will not exist on their own in the 3D-space. As this property is not inherited, it must be set for all non-leaf descendants of the element.
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.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
