我正在尝试使用 CSS
变换旋转图像,使其在周围的 div
中保持正确对齐,即图像的左上角应与 div
的左上角对齐。
正如您可以在 这里(-> 点击 [rotate]
)看到的那样,这并不起作用。有没有办法解决这个问题?
(请注意,我将在在线图像查看器中使用此功能,因此无法为旋转图像硬编码偏移量。有很多类似的问题,但我没有找到这个确切的问题。)
如果您希望在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>
offset
,从新旋转的offset
中减去它,并使用margin将其放回到容器中。它适用于所有旋转。这是演示链接。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
。
我不知道是否有更简单的方法,但您可以像这样设置旋转后图像的边距。
margin:68px -66px;
您总是可以搞砸
-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" 的整体设计产生影响(无法正确对齐)
我今天遇到了类似的问题,最高评论确实帮了很多忙。
然而,
在我的情况下,我正在上传图片以便在导出时添加到生成的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
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);
});
overflow:hidden;
只会裁剪图像的部分,但无法修正对齐。 - fuenfundachtzig