css - CSS：旋转图像并左上对齐

Question

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

正如您在此处看到的（-> 单击[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;
}

更新的演示

诀窍是围绕左下角旋转图像。完成后，它会下降 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并使用边距将其放回容器中。它适用于所有旋转。这是小提琴。

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是（猜想）旋转的。<a>myimageidimg

在这里试试。

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()”使用“position: absolute”影响整体设计（未正确对齐）

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

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/