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

我尝试使用

CSS

变换旋转图像，使其在周围

div

中保持正确对齐，即图像的左上角应与

div

的左上角对齐

如您所见（->单击

[rotate]

），这不起作用。有办法解决这个问题吗

---

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

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

margin:68px -66px;

您可以使用js获取图像的宽度和高度，以便它根据图像的大小设置相应的值。我用手工的方式

编辑：

你总是可以惹麻烦

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

---

如图所示：

使用一些jQuery，您可以获得父对象的

偏移量，从新旋转的
偏移量中减去该偏移量，然后使用边距将其放回容器中。它适用于所有旋转。这是

JS:

从目前给出的答案来看，我认为没有比使用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
，如果您想在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变换：translateX（-100%）旋转（-90度）；/*Safari*/
-moz变换：translateX（-100%）旋转（-90度）；/*Firefox 3.6 Firefox 4*/
-ms变换：translateX（-100%）旋转（-90度）；/*IE9*/
-o变换：translateX（-100%）旋转（-90度）；/*Opera*/
变换：translateX（-100%）旋转（-90度）；/*W3C*/
-webkit变换原点：右上角；
-moz变换原点：右上角；
-ms变换原点：右上角；
-o变换原点：右上角；
变换原点：右上角；
}
我以@Lost Left堆栈为例，将其更改为可用于所有旋转，并且可以重复。
重置重复旋转的边距。
同时设置右边距和底部边距

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

示例：
您是否对div使用了'overflow:hidden'属性？
overflow:hidden只会切掉图像的一部分，但不会纠正对齐。先生，请让我的+1旋转-90度怎么样？还有哪些值需要更改，以及更改为什么？@MrPablo为反向旋转添加了代码段
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);
});