Центр по вертикали и по горизонтали повернутый div

Question

Я пытаюсь центрировать горизонтально и вертикально DIV внутри окна. Легко с немного CSS и JS. Но проблема в том, что мой DIV повернут (-33deg).

Так что я не считаю, как правильно его центрировать. Я пытался играть с преобразованием-происхождением и с вычислением в jQuery, но не получилось.

$ ('mydiv'). Width() дайте мне ширину DIV, не повернутую ... не фактическую "диагональную" ширину ... (То же самое для высоты).

Я не могу это исправить вручную с фиксированным запасом, потому что сайт должен реагировать ...

Возможно ли это?

Это результат, что мне нужно иметь:

http://hpics.li/497b120

Большое спасибо за вашу помощь!

Morgan

(Извините, если я сделал некоторые английские ошибки: сек)

Answer 1

Сочетание CSS преобразований, абсолютное позиционирование, и преобразование координат, кажется, сделал это для меня.

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

Маленькая демонстрация: http://jsbin.com/suxawefabe/1/