javascript - 图像在旋转 90 度时脱离父 td

Question

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

我正在使用 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 transform rotate 不会改变图像的 Metrics。我的意思是，图像对象的高度不会转换为图像对象的宽度。这就是为什么 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!");
        }
    }