CSS3 drehen rendert Elemente um sie zu überlappen schwimmt

Question

Ich habe ein Problem mit einigen CSS3 Zeug, wie der Titel beschreibt. In meiner Website, die ich ein paar article ‚s verwenden, die eine

article { 
    transform: rotate(1deg) 
} 

haben (plus die drei Browser-Anbieter Präfixe, der Kürze halber weggelassen)

den Inhalt zu halten innen gerade nach oben (nur der Hintergrund gedreht) ich drehen alle Elemente innerhalb der Artikel wieder von

article > * { 
    transform: rotate(-1deg)'; 
} 

innerhalb der Artikel mit (sie sind Blog-Posts) gibt es in der Regel ein paar p ‚s und manchmal innerhalb ein schwebendes Bild. Allerdings, wenn ich ein Bild rechts wie so float:

<article> 
    <p> 
    <a href="#"> 
     <img src="x.jpg" style="float: right" /> 
    </a> 
    </p> 
    <p>Content here</p> 
</article> 

Die zweiten <p> wird bis zur linken Seite des Bildes beenden (weil es schwimmt), sondern weil es ein Block-Element ist wird es die gesamte Breite einnehmen der article und Überlappung das schwebende Bild, wodurch die Verbindung an einigen Stellen nicht anklickbar. Wenn ich die transform: rotate deaktiviere, passiert das nicht, also denke ich, dass es mit der Art und Weise zu tun hat, wie die Rotation gerendert wird. Das Problem tritt in Chrome und FireFox, IE unterstützt nicht zu drehen und Opera habe ich nicht getestet.

Jeder hat eine Idee, wie man es beheben kann?

(Beispiel: http://www.stephanmuller.nl/portfolio/stephanmuller-nl/)

Answer 1

Also ging ich auf eine Untersuchung dieser Fehler auf die Spur, und ich fand heraus, dass, wenn Sie eine CSS transform Eigenschaft verwenden (nicht beschränkt drehen) ist neu gerendert. Normalerweise wissen Elemente, die nach einem Floating-Element kommen, nicht, es zu überlappen, sondern darunter zu fließen (der Inhalt schwebt, aber der Hintergrund eines Absatzes z. B. erstreckt sich immer noch über die gesamte Breite des enthaltenden Elements hinter dem Floating-Element).

Wenn ein Element gedreht wird, berücksichtigt der Browser die Floating-Elemente jedoch nicht. Das gedrehte Element überlappt schwimmende Elemente. Das gleiche gilt für relativ/absolut positionierte Elemente, die vor dem rotierten Element im DOM stehen. sie überlappen sich auch.

Einige Testfälle: jsFiddle