Ungerade nicht erfundene Raum, der durch rotierende Div verursacht wird ⇐ HTML

[Anonymous]

Ich habe derzeit ein ungeraden Problem, das durch Drehen eines Divs verursacht wird. https://codepen.io/mark-boute/pen/wbvxrex

Beachten Sie, dass das Hinzufügen von Assets eine Pro-Funktion ist. Daher musste ich das SVG direkt als HTML einfügen. Der tatsächliche Code wird mit Django-Komponenten geschrieben, daher habe ich mein Bestes versucht, ihn neu zu erstellen. Entfernen der Transformation: Drehen (180 °); CSS -Linie scheint dieses Verhalten zu entfernen. Das Verhalten ist für Chrom- und Firefox -basierte Browser gleich. Ich habe dies unter Verwendung mehrerer Geräte getestet. /> < /ul>

(Ich möchte speziell das Verhalten der Rotation anstelle von skalieren (-1) < /code> für den Effekt meiner SVGs!). class = "Snippet-Code-CSS Lang-CSS PrettyPrint-Override">

Code: Select all

.background {
background-color: black;
height: 100px;
width: 100%;
backface-visibility: hidden;
}

.flipped {
transform: rotate(180deg);
}

.content {
/*   ugly fix, not helping me understand what is happening */
/*   outline-offset:-1px; */
/*   outline: 2px solid #1ab2e6; */
}< /code>

screenshot von dem, was in meinem Projekt passiert: