我正在尝试使用CSS 变换旋转图像，使其在周围的div 内保持正确对齐，即图像的左上角应与div 的左上角对齐.
如您所见here（-> 点击[rotate]）这不起作用。有没有办法来解决这个问题？
（请注意，我将在在线图像查看器中使用它，因此我无法硬编码旋转图像的偏移量。有很多类似的问题，但我没有找到这个确切的问题。）
【问题讨论】：
overflow:hidden; 只会切除部分图像，但不会更正对齐方式。
标签： css image layout alignment rotatetransform
如果你想在 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>【讨论】：
使用一些 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);
});
【讨论】：
根据目前给出的答案，我认为没有比使用 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 旋转。
试试here。
【讨论】：
不知道有没有更简单的方法，不过你可以像这样设置图片旋转后的边距。
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;
在这里找到：CSS "transform: rotate()" affecting overall design with "position: absolute" (not aligning properly)
【讨论】：
我采用@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);
});
【讨论】：
我今天遇到了类似的问题，顶评论确实对开始有很大帮助。
然而，
在我的场景中，我正在上传图片，这些图片将在导出时添加到生成的 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
【讨论】：