w-y*sin(theta) = x*cos(theta)
h-y*cos(theta) = x*sin(theta)
在这里,
w = given width
h = given height
x = width you need
y = height you need
theta = angle
一点三角知识可谓极有用处。
解决这个同时方程的答案是 -
2x = (w+h)/(cos(theta)+sin(theta)) + (w-h)/(cos(theta)-sin(theta))
2y = (w+h)/(cos(theta)+sin(theta)) - (w-h)/(cos(theta)-sin(theta))
可以随意转换为数学函数。
Width
和height
在旋转元素时不会改变,这个问题可以通过使用下面的方法获取值来解决,而且效果也是一样的。请通过dom获取以下值:
var rot =document.getElementById("rot");
console.log(rot.offsetWidth,rot.offsetHeight)
#rot{
width:100px;
height:40px;
background-color:pink;
transform:rotate(30deg)
}
<div id="rot"></div>