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);

}());

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

Answer 2

马蒂答案的简化版本

var scaler = function (id, degrees) {
        var inner = document.getElementById(id);
        offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight);
        originalHeight = inner.offsetHeight;
        originalFactor = Math.sqrt(Math.pow(inner.offsetHeight, 2) + Math.pow(inner.offsetWidth, 2));
        var radians = degrees * Math.PI / 180,
            sum, result;
        if (degrees < 90) {
            sum = radians - offsetAngle;
        } else if (degrees < 180) {
            sum = radians + offsetAngle;
        } else if (degrees < 270) {
            sum = radians - offsetAngle;
        } else {
            sum = radians + offsetAngle;
        }
        var result = (originalHeight / Math.cos(sum)) / originalFactor;
        inner.style.webkitTransform = 'scale(' + result+ ')';
        inner.style.transform = 'scale(' + result+ ')';
}