CSS：旋转图片并将其对齐到左上角。

Question

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

正如您可以在 这里（-> 点击 [rotate]）看到的那样，这并不起作用。有没有办法解决这个问题？

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

- fuenfundachtzig

---

你在 div 中使用了 'overflow:hidden' 属性吗？ - Vivek Vikranth

overflow:hidden; 只会裁剪图像的部分，但无法修正对齐。 - fuenfundachtzig

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

更新演示

技巧是围绕左下角旋转图像。完成后，它向下移动了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>

- vals

---

旋转-90度怎么样？还需要改变哪些值，改成什么值？ - Mr Pablo

@MrPablo添加了反向旋转的代码片段。 - vals

Answer 2

使用jQuery，您可以获取父容器的offset，从新旋转的offset中减去它，并使用margin将其放回到容器中。它适用于所有旋转。这是演示链接。

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

- Lost Left Stack

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 是我滥用作为开关的 <a> 的 id，myimage（猜测）是需要旋转的 img 的 id。

在此处尝试：http://jsfiddle.net/mbpLC/18/。

- fuenfundachtzig

Answer 4

我不知道是否有更简单的方法，但您可以像这样设置旋转后图像的边距。

margin:68px -66px;

你可以使用JavaScript获取图像的宽度和高度，以便根据图像的尺寸设置相应的值。我使用了手动方式。

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()" 对使用 "position: absolute" 的整体设计产生影响（无法正确对齐）

- nahive

Answer 5

我今天遇到了类似的问题，最高评论确实帮了很多忙。

然而，

在我的情况下，我正在上传图片以便在导出时添加到生成的pdf中。 我允许用户在前端旋转它们，并保存旋转值（即0、90、180、270）与图片本身一起。

.ctp文件用于生成文件，其中包含以下内容：

echo '<img class="image" src="'.h($imageSrcPath).'" alt="" />';

因此，为了进行旋转，我创建了以下类：

img.rotate_0 {
  -webkit-transform: rotate(0deg);
  -webkit-transform-origin: center center;
}

img.rotate_270 {
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: top right;
}

img.rotate_180 {
  -webkit-transform: rotate(180deg);
  -webkit-transform-origin: center center;
}

img.rotate_90 {
  -webkit-transform: translateX(-100%) rotate(270deg);
  -webkit-transform-origin: top right;
} 

并更改了.ctp文件为

echo '<img class="rotate_'.h($rotation).'" src="' . h($imageSrcPath) . '" alt="" style="margin-top:15px;")/>';

由于不同的旋转角度需要我有略微不同的transform-origin

- Kiruna

Answer 6

我采用了@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/

- Gustavo