Entfernen geerbt CSS 3D-Transformieren

Question

sagen wir mal ich einen übergeordneten Container haben, die

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

gesetzt ist, und innen ist es eine Reihe von Punkten, in denen ich möchte nicht, dass Styling haben. was muss ich tun? setze seine Transformationswerte auf 0? wie

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

Ich habe eine Probe jsfiddle hier: http://jsfiddle.net/8cUPL/1/

Answer 1

Sie meinen, Sie die Elemente verhalten soll, als ob sie gar nicht Teil des perspectived Behälter sind? Nein, das ist nicht möglich.

Sie können jedoch ein wenig Javascript verwenden, um die Elemente aus dem Container herauszunehmen und sie an einer anderen Stelle im DOM-Baum zu platzieren. Dann werden sie frei sein von der Perspektive.

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

Die perspective und seine -origin tun etwas eigentlich nicht auf eigene Faust. Um die Transformation eines Kindes Element entfernen Sie einfach seine transform wie so zurückgesetzt werden:

transform: none; 

Answer 3

Die transform-* Eigenschaften, wie opacity und einige andere Rendering bezogenen diejenigen, nicht ‚erben‘ in CSS Bedeutung der Vererbung. Stattdessen wenden sie die visuellen Änderungen auf das Element als Ganzes an, einschließlich aller seiner Nachkommen. Das Anwenden von etwas wie transform: none; auf diese Nachkommen hat keinen sichtbaren Effekt, es bedeutet nur, dass diese Elemente nicht selbst umgewandelt werden, aber sie werden immer noch mit dem Elternelement transformiert - nicht weil sie seinen Stil "erben", sondern weil sie sind Teile seiner Erscheinung.

Die einzige Möglichkeit, die Transformation des Elternelements für einen Nachkommen visuell zu "rückgängig machen" (dh es als nicht transformiert aussehen zu lassen) besteht darin, es so zu transformieren, dass das Ergebnis dieser Transformation aus der gegebenen Perspektive aussieht So wie es aussehen würde, ohne sich überhaupt umzuwandeln. Um dies zu ermöglichen, müssen das transformierte Element selbst und alle dazwischenliegenden Vorfahren des gegebenen Elements transform-style: preserve-3d haben. Die benötigte "kompensierende" Transformation kann aus der resultierenden 3D-Szene berechnet werden oder einfach durch Einstellen von Transformationswerten durch Versuch und Irrtum, z.

.items{ 
    ... 
    transform: translate3d(-51px, 11px, 29px) rotateX(-45deg); 
    transform-origin: 50% 100% 0px; 
} 

(siehe JSfiddle).

Leider ist diese Problemumgehung nicht kompatibel mit overlow:hidden, weil es (zusammen mit some other properties) effektiv transform-style: preserve-3d entfernt. Wenn Sie also die übergelaufenen Teile des transformierten Elements abschneiden und gleichzeitig die Transformation seines Teils rückgängig machen müssen, wäre die einzige Lösung, die für Sie geeignet wäre, den Code so zu organisieren, dass dieser Teil nicht der Nachkomme ist des transformierten Elements nicht mehr.