CSS: поворот изображения и выравнивание вверху слева

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

Как вы видите здесь (- > нажмите [rotate]), это не сработает. Есть ли способ исправить это?

(Обратите внимание, что я буду использовать это в онлайн-приложении для просмотра изображений, поэтому я не могу жестко скопировать смещение для повернутого изображения. Там много подобных вопросов, но я не нашел этого точного вопроса.)

Ответ 1

Если вы хотите, чтобы это было сделано в CSS, это способ:

.rot90 {
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */
    transform: translateY(-100%) rotate(90deg); /* W3C */  
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

обновленная демонстрация

Фокус в том, чтобы повернуть изображение вокруг левого нижнего угла. После этого он падает на 100% от высоты; переведите его, и теперь все в порядке.

Чтобы получить тот же эффект для обратного вращения: (hover to transform)

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

<div style="border: 1px solid red;">
  <img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" />
</div>

Ответ 2

Используя некоторый jQuery, вы можете получить offset родителя, вычесть из нового повернутого offset и использовать маржу, чтобы вернуть его в контейнер. Он работает со всеми поворотами. Вот сценарий.

JS:

function rotate(elm, deg) {
    var offsetContLeft, offsetContTop, offsetLeft, offsetTop, newLeft, newTop;
    $(elm).css('transform', 'rotate('+ deg +'deg)');
    // Get the container offset
    offsetContLeft = $(elm).parent().offset().left;
    offsetContTop= $(elm).parent().offset().top;
    // get the new rotated offset
    offsetLeft = $(elm).offset().left;
    offsetTop = $(elm).offset().top;
    // Subtract the two offsets.
    newLeft = offsetContLeft - offsetLeft;
    newTop = offsetContTop - offsetTop;
    // Apply the new offsets to the margin of the element.
    $(elm).css('margin-left', newLeft).css('margin-top', newTop);
}

$("#myrotate").click(function (e) { 
      // pass in the element to rotate and the desired rotation.
      rotate('#myimage', 90);
});

Ответ 3

Из ответов, представленных до сих пор, я полагаю, что нет более простого подхода, чем использование JavaScript для "переустановки" изображения. Поэтому позвольте мне поделиться подходом, который я использовал:

var step = 0;

$("#myrotate").click(
  function (e) { 
    step += 1;
    var img = $("#myimage");
    img.css('transform', 'rotate('+ step*90 +'deg)'); // could be extended to work also in older browsers
    var d = img.width() - img.height();
    img.css('margin-left', -d/2*(step%2));
    img.css('margin-top',   d/2*(step%2));
  }
);

myrotate - это id of <a>, который я использую как переключатель, myimage (предположим) id для img для вращения.

Попробуйте здесь.

Ответ 4

Я не знаю, есть ли более простой способ, но вы можете установить край изображения после вращения, как это.

margin:68px -66px;

Вы можете использовать js для получения ширины и высоты изображения, чтобы он задавал значения в соответствии с размером изображения. Я использовал ручной способ.

http://jsfiddle.net/YQktn/3/

ИЗМЕНИТЬ:

Вы всегда можете столкнуться с

-webkit-transform-origin: 75px 75px;
-moz-transform-origin: 75px 75px;
-ms-transform-origin: 75px 75px;
-o-transform-origin: 75px 75px;
transform-origin: 75px 75px;

как показано здесь: CSS "transform: rotate()" влияющие на общий дизайн с "положением: абсолютный" (не выравнивание должным образом)

Ответ 5

Я взял пример @Lost Left Stack и изменил его, чтобы он работал со всеми поворотами и был повторным. Сбрасывает поля для повторяющихся вращений. Также установите правые и нижние поля.

function rotateImage(elm, deg) {
    $(elm).css('margin-left', 0).css('margin-top', 0);
    $(elm).css('transform', 'rotate(' + deg + 'deg)');
    // Get the container offset
    var offsetContLeft = $(elm).parent().offset().left;
    var offsetContTop = $(elm).parent().offset().top;
    // get the new rotated offset
    var offsetLeft = $(elm).offset().left;
    var offsetTop = $(elm).offset().top;
    // Subtract the two offsets.
    var newOffsetX = Math.floor(offsetContLeft - offsetLeft) + 1;
    var newOffsetY = Math.floor(offsetContTop - offsetTop) + 1;
    $("#a").text(newOffsetX + "-" + newOffsetY)
    // Apply the new offsets to the margin of the element.
      $(elm).css('margin-left', newOffsetX).css('margin-top', newOffsetY)
          .css('margin-right', newOffsetX).css('margin-bottom', newOffsetY - 4);
}
var rot = 0;
$("#myrotate").click(function (e) { 
rot += 15;
      rotateImage('#myimage', rot);
});

пример: http://jsfiddle.net/v4qa0x5g/2/