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

编辑编辑：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

如果您的网页结构无法使用此解决方案，请与我们联系。

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

1 个答案: