如果你看一下：
http://jsfiddle.net/KA4dz/
在此演示中,您可以清楚地看到内部元素由于其旋转而到达外部元素的外部.要求是缩小内部元素(同时保持纵横比和中心定位),使其适合其容器.
用例是用户可以手动旋转这样的内部元件,同时确保它保持在外部元件内. (所以简单地缩小直到它适合眼睛不是一个解决方案).
这是一个我的数学技能显然缺乏的场景.发布我试过的东西在这个阶段不会做得很好.有人能指出我正确的方向吗？
谢谢！
另外一个要求是内部元素只在需要时缩小,但在不需要时则不缩小(必要时意味着离开外部元素的边界)
要保存点击：
.outer{
border: 1px solid black;
width: 100px;
height: 50px;
margin: 100px;
}
.inner{
background: blue;
width: 100px;
height: 50px;
transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
}
<div class="outer">
<div class="inner">
</div>
</div>
解决方法
这很有趣.这是我的解决方案：
http://jsfiddle.net/fletiv/jrHTe/
而javascript看起来像这样：
(function () {
var setRotator = (function () {
var setRotation,setScale,offsetAngle,originalHeight,originalFactor;
setRotation = function (degrees,scale,element) {
element.style.webkitTransform = 'rotate(' + degrees + 'deg) scale(' + scale + ')';
element.style.transform = 'rotate(' + degrees + 'deg) scale(' + scale + ')';
};
getScale = function (degrees) {
var radians = degrees * Math.PI / 180,sum;
if (degrees < 90) {
sum = radians - offsetAngle;
} else if (degrees < 180) {
sum = radians + offsetAngle;
} else if (degrees < 270) {
sum = radians - offsetAngle;
} else {
sum = radians + offsetAngle;
}
return (originalHeight / Math.cos(sum)) / originalFactor;
};
return function (inner) {
offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight);
originalHeight = inner.offsetHeight;
originalFactor = Math.sqrt(Math.pow(inner.offsetHeight,2) + Math.pow(inner.offsetWidth,2));
return {
rotate: function (degrees) {
setRotation (degrees,getScale(degrees),inner);
}
}
};
}());
var outer = document.getElementById('outer'),inner = document.getElementById('inner'),rotator = setRotator(inner),degrees = 0;
window.setInterval(function () {
degrees += 1;
if (degrees >= 360) {
degrees = 0;
}
rotator.rotate(degrees);
},50);
}());
编辑：这是一个试图解释我的代码逻辑的图像.
