Warum unterbricht die Überlaufeigenschaft CSS3 3D-Transformationen? - css, css3, transformieren, css-transformieren

Ich versuche, mehrere verschachtelte 3D-transformierte Elemente zu erstellen, dh mehrere verschachtelte Elemente haben alle 3D-Transformationen und die transform-style:preserve-3d Eigentum.

Wenn ein Element jedoch ein overflow Eigentum, alle seine Vorfahren sind abgeflacht.

Beispielsweise:

<style>
div{transform-style:preserve-3d;}
</style>

<div style="transform:rotateY(30deg) rotateX(-30deg);">
<div style="transform:translateZ(30px)">
<div style="transform:translateZ(30px)">
<div style="transform:translateZ(30px);overflow:hidden"><!-- everything beyond here is flat -->
<div style="transform:translateZ(30px)">
<div style="transform:translateZ(30px)">
<div style="transform:translateZ(30px)">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Geige: http://jsfiddle.net/Lqfy3mgs/

Ich habe das in Chrome und FF getestet. Ist es möglich, die Vorfahren sogar mit einem 3D zu machen? overflow?

Antworten:

6 für die Antwort № 1

Ich habe Angst, dass pro Spezifikationen:

Die folgenden CSS-Eigenschaftswerte erfordern, dass der Benutzeragent einen erstellt abgeflachte Darstellung der Nachkommenelemente, bevor sie sein können angewendet und daher Erzwinge den verwendeten Wert von transform-style auf eben:

  • Überlauf: Jeder Wert außer sichtbar.
  • ...

Quelle: http://dev.w3.org/csswg/css-transforms/#grouping-property-values


0 für die Antwort № 2

w3:

versteckt Dieser Wert gibt an, dass der Inhalt abgeschnitten ist und dass keine scrollende Benutzeroberfläche bereitgestellt werden sollte, um den Inhalt außerhalb des Clipping-Bereichs anzuzeigen.

Wie Sie sehen können, ist dies für 3D-transformierte Elemente, so dass selbst die Transformation nicht dem Clipping entkommen kann, das beim Setzen passiert overflow:hidden.


Speisekarte