Javascript 世界/屏幕空间中的CSS转换

如果我有两个嵌套元素，假设：

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

---

编辑：getComputedStyle很难看。呃，为什么没有好的解决办法

> P>我不清楚你的实际代码是什么样子，但是在你想要同时旋转和翻译一个对象的情况下，你可能想考虑在旋转之前移动对象。 HTML

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

---

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

您所说的“相对于屏幕移动”是什么意思？您使用200px转换试图实现什么？只需将元素垂直向下移动，而不是以45度角移动。我就可以得到您想要的。您是否考虑过将翻译应用于

.outside

而不是

.inside

？甚至将转换原点更改为-200px也可以。我有Derek，但这不能解决一般情况！想象一下，我有一个充满节点的完整图形，我只想移动叶子。移动父节点将移动所有内容@Brendannable如果你想要精确的位置和更少的限制，你可能想尝试在画布上画画。啊，对不起，我忘了提到不允许家长移动！

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

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

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

#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);
}