updated demo

Question

我正在尝试使用CSS变换旋转图像，使其在周围div内保持正确对齐，即图像的左上角应与左上角对齐div。

如您所见[{3}}（ - ＆gt;点击[rotate]），这不起作用。有没有办法来解决这个问题？

（请注意，我将在在线图像查看器中使用它，因此我无法对旋转图像的偏移进行硬编码。有很多类似的问题，但我没有找到这个确切的问题。）

Answer 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;
}

updated demo

诀窍是围绕左下角旋转图像。一旦完成，它下降了100％的高度;翻译它，现在没问题。

为反向旋转获得相同的效果:(悬停到变换）

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>

Answer 2

使用一些jQuery，您可以获取父级的offset，从新的轮换offset中减去它，并使用边距将其放回容器中。它适用于所有旋转。这是the Fiddle。

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);
});

Answer 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的{{1}}，我滥用它作为切换，<a>是（猜测）myimage id旋转。

试试here。

Answer 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()" affecting overall design with "position: absolute" (not aligning properly)

Answer 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);
}
var rot = 0;
$("#myrotate").click(function (e) { 
rot += 15;
      rotateImage('#myimage', rot);
});

示例：http://jsfiddle.net/v4qa0x5g/2/

CSS：旋转图像并对齐左上角

5 个答案:

updated demo