世界/屏幕空间中的 CSS 变换答案

【问题标题】：CSS Transform in World/Screen Space世界/屏幕空间中的 CSS 变换
【发布时间】：2015-08-31 04:09:05
【问题描述】：

如果我有两个嵌套元素，可以说：

<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)"

编辑编辑：getComputedStyle 很难看。呃，为什么没有好的解决方案。 How to read individual transform values in JavaScript?

【问题讨论】：

“相对于屏幕移动它”是什么意思？你想用 200px 变换来完成什么？
只需将元素垂直向下移动屏幕，而不是 45 度角。
我得到你想要的。您是否考虑过在.outside 而不是.inside 上应用翻译？甚至将变换原点更改为 -200px 也可以。
我有 Derek，但这并不能解决一般情况！想象一下，我有一个充满节点的整个图，我只想移动叶子。移动父节点将移动所有内容！
@BrendanAnnable 如果你想要精确的位置和更少的限制，你可能想尝试在画布上绘图。

标签： javascript html css

【解决方案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

如果您的页面结构不适用于此解决方案，请告诉我。

【讨论】：

啊对不起，我忘了说父母不允许搬家！