Question

很难用文字解释，所以我试着用图形来解释。

这里有一个div的风格。

enter image description here

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

enter image description here

因为它是一个变换（旋转）的物体，所以会发生一些事情并且＆＃34; TOP-LEFT＆＃34;它的一角，向下移动。

现在我想保持其前后左右＃34;位置固定。但我无法找到正确的相关性来解决它。我想我需要一个使用旋转角度的三角公式。

我也知道它与＆＃39; scale＆＃39;有关。和＆＃39; transform-origin＆＃39;并且可以很容易地完成它们但我不想使用任何其他转换参数。特别是＆＃39; transform-origin＆＃39;因为缺乏浏览器支持。

这里是否有人可以帮助我解决相关问题，这些关联将在JavaScript中用于修复其角落。也许getBoundingClientRect()可用于此。

以下是FIDDLE

谢谢。

Answer 1

CSS变换实际上是矩阵，其中变换元素是用 matrix(a, b, c, d, tx, ty)。

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

换句话说，如果你查看计算出的样式，那么就不会有旋转度数的样式，你不能再做element.style.transform并再次获得旋转角度，所有你得到的是矩阵。

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

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

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

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

FIDDLE

只是为了证实这一点，看看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，可以执行此操作：

<强> FIDDLE

$(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'});
        }
    })
});

Answer 3

正如其他人所说，您可以使用transform-origin。但是，如果您仍想通过Javascript进行此操作，我已在此jsfiddle为您完成此操作。

基本上，我所做的是使用矩阵变换进行旋转（简化）来计算每个图的左上角的旋转位置，假设图的中心点为(0, 0)，这基本上是，浏览器的功能。计算出角落的新位置后，我会计算差异，并从原始left和top位置中减去这些差异。我希望你觉得它很有启发性。

$(function () {

    var isScaled = false;
    var box = $('#box');

    box.on('click', function () {
        if (isScaled) {
            isScaled = false;
            $(this).width('200');
            placeBox(400, 200);
        } else {
            isScaled = true;
            $(this).width('400')
            placeBox(200, 400);
        }    
    });
    var left = parseInt(box.css('left'));
    var top = parseInt(box.css('top'));
    var angle = (345 / 360) * 2 * Math.PI; //in radians;    

    function placeBox(oldWidth, newWidth) {
        var midHeight = box.height() / 2;
        var midOldWidth = oldWidth / 2;
        var midNewWidth = newWidth / 2;
        var cos = Math.cos(angle);
        var sin = Math.sin(angle);
        //rotation center coordinates
        var cx1 = left + midOldWidth;
        var cx2 = left + midNewWidth;
        var cy = top + midHeight;
        var mx1 = -midOldWidth * cos + midHeight * sin;
        var my1 = -midOldWidth * sin - midHeight * cos;
        var mx2 = -midNewWidth * cos + midHeight * sin;
        var my2 = -midNewWidth * sin - midHeight * cos;
        var difX = cx2 + mx2 - cx1 - mx1;
        var difY = my2 - my1;
        //now, position the element where it should:
        box.css({
            left: (left - difX) + 'px',
            top: (top - difY) + 'px'
        });
    }
})

Answer 4

这个小提琴正在显示问题：http://jsfiddle.net/y343Z/19/ 如果更改“阴影”大小，它将沿着X Y轴移动。

这里有一个可能的消息。 http://jsfiddle.net/y343Z/18/

只需将阴影置于转换元素内：

<div id="box">
<div id="box-shadow" style="width:400px;"></div>
</div>

使用这个CSS：

#box {
    width:200px;
    height:200px;
    position:absolute;
    top:50px;
    left:50px;
    -moz-transform:rotate(345deg);
    -webkit-transform:rotate(345deg);
    -o-transform:rotate(345deg);
    -ms-transform:rotate(345deg);
}
#box-shadow {
    width: inherit;
    height: inherit;
    background-color:silver;
    position:absolute;
    opacity: 0.3;
}
#box {
    background-color:orange;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

只是为了澄清：我知道真正的阴影并不是理想的，因为它必须在变换后的盒子之外。但我认为你的影子对象是一个“帮助者”，其中包含截图中的句柄。

编辑：

正如其他用户发布的那样，您也可以使用transform-origin：http://jsfiddle.net/y343Z/20/

 transform-origin: left center 0;

CSS转换了对象定位

4 个答案: