Исправлено изменение положения объекта CSS

Ответ 1

Преобразования CSS - это действительно матрицы, где преобразование элементов выполняется с помощью matrix(a, b, c, d, tx, ty).

Тогда кто-то умный понял, было бы слишком сложно для веб-дизайнеров понять такую ​​матрицу, поэтому они добавили сокращенные решения, например transform: rotate() и т.д.

Другими словами, если вы просмотрите вычисленные стили, не будет стиля с повернутыми градусами, и вы не сможете сделать element.style.transform и снова вернуть угол поворота, все, что вы получите, это матрица.

Поскольку браузеры используют матрицу, все браузеры, поддерживающие преобразование CSS, также поддерживают изменение происхождения этого преобразования, поэтому, если вы можете повернуть элемент, вы можете изменить начало.

Исключение составляют фильтры Microsoft, но даже там вы можете повернуть и изменить начало координат, это немного сложнее понять.

Поскольку нет смысла не просто изменять происхождение преобразования, а вычислять его самостоятельно, то это будет делать то же самое, только в сто раз сложнее, вы должны просто добавить это в CSS для решения проблемы

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

FIDDLE

Чтобы подтвердить это, посмотрев MDN, внизу следующих страниц, вы найдете поддержку браузера, и это примерно то же самое для transform и origin-transform, поскольку у вас вообще никогда нет одного без другого

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

Как последнее замечание, если бы это был я, я бы даже не беспокоился об IE8 и ниже, поскольку эти пользователи, вероятно, в любом случае привыкли к тем, которые выглядят странно в эти дни.

Ответ 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'});
        }
    })
});

Ответ 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'
        });
    }
})

Ответ 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;
}

Просто чтобы уточнить: я знаю, что это не желательно для реальной тени, так как это должно быть вне трансформированного окна. Но я думаю, что теневой объект является "помощником", который содержит ручки, как на скриншоте.

Edit:

Как и другие пользователи, вы также можете использовать transform-origin: http://jsfiddle.net/y343Z/20/

 transform-origin: left center 0;