Question

我在td中有一个图像，我试图将它旋转90度，但我离开了桌子。

我正在使用transform: rotate(90deg) translateY(-100%);

JSFiddle：http://jsfiddle.net/bimbari/ck9vwhs6/

var img = document.getElementById('img');

var angle = 0;

document.getElementById('rotate-clockwise').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = "rotate" + angle;
};

document.getElementById('rotate-counterclockwise').onclick = function() {
  angle = (angle - 90) % 360;
  if (angle < 0) angle = angle + 360;
  img.className = "rotate" + angle;
};

table > tbody > tr > td {
  padding: 10px;
  border: solid 1px #ccc;
}
#img {
  transform-origin: top left;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
}
#img.rotate90 {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}
#img.rotate180 {
  transform: rotate(180deg) translate(-100%, -100%);
  -webkit-transform: rotate(180deg) translate(-100%, -100%);
  -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#img.rotate270 {
  transform: rotate(270deg) translateX(-100%);
  -webkit-transform: rotate(270deg) translateX(-100%);
  -ms-transform: rotate(270deg) translateX(-100%);
}

<a title="Rotate counterclockwise" id="rotate-counterclockwise" href="#">Rotate counterclockwise</a> | <a title="Rotate clockwise" id="rotate-clockwise" href="#">Rotate clockwise</a> 
<table>
  <tr>
    <td>
      <img id="img" src='http://www.malmas.ch/linksbutton.jpg' />
    </td>
  </tr>
</table>

Answer 1

在我看来，CSS3转换旋转不会改变图像的度量标准。我的意思是，图像对象的高度不能转换为图像对象的宽度。这就是为什么td不会自动成长以适应img。

为此，你应该使用javascript：

function GetBox () {
        var img = document.getElementById ("myImg");

        if (img.getBoundingClientRect) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
            var rect = img.getBoundingClientRect ();
            x = rect.left;
            y = rect.top;
            w = rect.right - rect.left;
            h = rect.bottom - rect.top;

            alert (" Left: " + x + "\n Top: " + y + "\n Width: " + w + "\n Height: " + h); // This height can be used to resize td.
        }
        else {
            alert ("Your browser does not support this example!");
        }
    }

Answer 2

您应首先编辑的一件事是从rotate(90deg)到rotateZ(90deg)的实际轮值，并检查这是否有帮助。

http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_rotatez

当旋转90度时，图像离开父td

2 个答案: