旋转90度时从父td中取出来的图像

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)，并检查这是否有帮助。

rotatez