CSS转换了对象定位

Question

用文字很难解释,所以我试着用图形来解释.

这里有一个div的风格.

现在,如果我在这里用400px更改宽度......

因为它是一个变换的(旋转的)物体,所以发生了一些事情并且它的"顶部向左"角落向下移动.

现在我想保持其"TOP-LEFT"位置.但我无法找到正确的相关性来解决它.我想我需要一个使用旋转角度的三角公式.

另外我知道它与' scale'和' transform-origin'有关,可以用它们轻松完成,但我不想使用任何其他转换参数.特别是transform-origin因为缺乏浏览器支持.

这里是否有人可以帮助我解决相关问题,这些关联将用于JavaScript来修复它的角落.也许getBoundingClientRect()可以用于此.

这是FIDDLE

谢谢.

Answer 1

CSS转换实际上是矩阵,其中转换元素是完成的
matrix(a, b, c, d, tx, ty).

然后有人聪明地发现,对于网页设计师来说理解这样一个矩阵会太复杂,所以他们添加了速记解决方案等transform: rotate().

换句话说,如果您查看计算出的样式,则不会有旋转度数的样式,并且您无法element.style.transform再次返回旋转角度,所有您将得到的是矩阵.

由于浏览器使用矩阵,所有支持CSS变换的浏览器也支持更改变换的原点,因此如果可以旋转元素,则可以更改原点.

唯一的例外是微软的过滤器,但即使在那里你可以旋转和改变原点,只需要更复杂一点.

因为不仅仅改变转换的起源并且自己计算它会做同样的事情,只有一百倍的复杂性是没有意义的,你应该真的只是将它添加到CSS来解决问题

-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;

小提琴

只是为了证实这一点,看看MDN,在下面几页的底部,你会发现浏览器的支持,它对于变换和变换原点来说几乎是一样的,因为你通常永远不会有一个没有其他的

https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

作为最后一点,如果是我,我甚至不会担心IE8及以下版本,因为这些用户可能习惯于现在看起来很奇怪的东西.

Answer 2

如果你不想使用transform-origin你可以这样做：

小提琴

$(function () {
    var isScaled = false;
    $('#box').on('click', function () {
        if (isScaled) {
            isScaled = false;
            $(this).width('200').css({'top':'50px','left':'50px'})
        } else {
            isScaled = true;
            $(this).width('400').css({'top':'24px','left':'46px'});
        }
    })
});