Zentriere vertikal und horizontal eine gedrehte div - jquery, html, css, rotation, center

Ich versuche, ein DIV innerhalb des Fensters horizontal und vertikal zu zentrieren. Einfach mit etwas CSS und JS. Das Problem ist jedoch, dass mein DIV gedreht wird (-33deg).

Also finde ich nicht, wie man es richtig zentriert. Ich habe versucht, mit transform-origin und mit einer Berechnung in jQuery zu spielen, aber es gelang mir nicht.

$ ("mydiv"). width () gibt mir die Breite der DIV nicht gedreht ... nicht die tatsächliche "Diagonale" Breite ...

Ich kann es nicht manuell mit einem festen Rand korrigieren, da die Website reagieren muss ...

Ist es möglich ?

Dies ist das Ergebnis, das ich haben muss:

http://hpics.li/497b120

Vielen Dank für Ihre Hilfe !

Morgan

(Sorry, wenn ich ein paar englische Fehler gemacht habe: s)

Antworten:

Eine Kombination aus CSS-Transformationen, absoluter Positionierung und Transformationsursprung scheint es für mich getan zu haben.

.element {
transform: rotateZ(30deg) translateX(-50%) translateY(-50%);
transform-origin: 0% 0%;
position: absolute;
left: 50%;
top: 50%;
}

Kleine Demo: http://jsbin.com/suxawefabe/1/