我在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>
答案 0 :(得分: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!");
}
}
答案 1 :(得分:0)
您应首先编辑的一件事是从rotate(90deg)
到rotateZ(90deg)
的实际轮值,并检查这是否有帮助。
http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_rotatez