javascript - CSS 在容器内旋转元素

Question

如果您看一下: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>        

Answer 1

这很有趣。这是我的解决方案: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);

}());

编辑:这是一张试图解释我的代码逻辑的图像。 :)