CSS Transform в World/Screen Space

Question

Если у меня есть два вложенных элементов, позволяет сказать:

<div id="outside"> 
    <div id="inside">Foo</div> 
</div> 

и применяет вращение внешнего элемента, позволяет сказать, повернуты по часовой стрелке на 45 градусов:

<div id="outside" style="transform: rotateZ(-45deg);"> 
    <div id="inside">Foo</div> 
</div> 

, и теперь я хочу немного перевести внутренний div по экрану.

<div id="outside" style="transform: rotateZ(-45deg);"> 
    <div id="inside" style="transform: translateY(100px);">Foo</div> 
</div> 

http://jsfiddle.net/du2w91vw/8/

О, нет! он наследует, что его родители трансформируются (что я действительно хочу) и переместили его под углом 45 градусов. Как тогда я перемещаю его вертикально относительно экрана (т. Е. Трансляции в мире)?

Теперь я мог хранить все его родительские преобразования и вычислять их сам, и выработать правильный перевод, но тогда я мог бы просто иметь полностью плоскую иерархию dom и делать все это сам. Я хочу использовать неявно унаследованные преобразования!

tl; dr: Есть ли способ получить преобразование мира элемента, не просматривая все дерево DOM для преобразований или сохраняя все родительские преобразования в памяти?

Примечание: Мое требование состоит в том, что я не могу перемещать внешний div.

Редактировать: Я только что узнал о getComputedStyle, который возвращает мне матрицу. Немного беспорядочного решения (всегда ли браузеры возвращают тот же формат?), Но я мог бы понять это.

var t = getComputedStyle(element, null).getPropertyValue('transform') 
// e.g. t = "matrix(1, 0, 0, 1, -333, -26)" 

Редактировать edit: getComputedStyle является уродливым. Фу, почему нет хорошего решения для этого. How to read individual transform values in JavaScript?

Answer 1

Я не на 100% понятен, как выглядит ваш реальный код, но в том случае, когда вы хотите как повернуть, так и перевести объект на страницу, вы можете рассмотреть возможность перемещения объекта до поворота.

HTML

<div id="outside"> 
    <div id="inside">Fooooooooooooo</div> 
</div> 

CSS

#inside{ 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
    transform: rotate(45deg); 
    color: red; 
    width: 100px; 
    height: 30px; 
    border: 1px solid black; 
} 

#outside{ 
    -ms-transform: translateY(200px); 
    -webkit-transform: translateY(200px); 
    transform: translateY(200px); 
} 

JSFiddle

Позвольте мне знать, если ваша страница структура не работает с этим решением.