CODEWITHSUNDEEP
javascripthtmlcss
enb081
enb081

Reputation: 4051

Image getting out of parent td when it is rotated by 90 degrees

I have a image inside td and I am trying to rotate it by 90 degrees, but I gets out of the table.

I am using 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>

Upvotes: 0

Views: 155

Answers (2)

Kiran Shakya
Kiran Shakya

Reputation: 2559

In my opinion, CSS3 transform rotate won't change the Metrics of the image. I meant, height of image object won't be transposed to width of the image object. That's why td won't auto grow to fit img.

For that, you should use javascript like:

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!");
        }
    }

Upvotes: 1

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

One thing you should edit first is that actual rotate value from rotate(90deg) to rotateZ(90deg) and check if that helps at all.

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

Upvotes: 0

Related Questions