Javascript CSS在容器内旋转元素

如果你看一下：

在这个演示中，您可以清楚地看到内部元素由于旋转而到达外部元素的外部。请求是缩小内部元素的比例（同时保持纵横比和中心位置），使其适合其容器

用例是用户可以手动旋转这样的内部元素，同时确保它保持在外部元素内。（因此，简单地缩小尺寸直到适合眼睛不是解决方案）

这是一个我的数学技能明显缺乏的场景。在现阶段，发布我尝试过的内容不会有多大好处。有人能给我指出正确的方向吗

谢谢

另一个要求是，内部元件仅在需要时缩小，而在不需要时从不缩小（如果需要，则意味着离开外部元件的边界）

要保存文件，请单击：

.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>        

.outer{
边框：1px纯黑；
宽度：100px；
高度：50px；
利润率：100像素；
}
.内部{
背景：蓝色；
宽度：100px；
高度：50px；
变换：旋转（-40度）；
-webkit变换：旋转（-40度）；
}

这很有趣。以下是我的解决方案：

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

}());

（函数（）{
变量setRotator=（函数（）{
var setRotation，
设置刻度，
偏移角，
原始高度，
起源因子；
设置旋转=功能（度、刻度、元素）{
element.style.WebKittTransform='旋转（'+度+'度）比例（'+比例+'）；
element.style.transform='rotate（'+degrees+'deg）scale（'+scale+'）；
};
getScale=函数（度）{
var弧度=度*Math.PI/180，
总和
如果（度<90度）{
总和=弧度-偏移角度；
}否则，如果（度<180度）{
总和=弧度+偏移角；
}否则，如果（度<270）{
总和=弧度-偏移角度；
}否则{
总和=弧度+偏移角；
}
返回值（原始高度/数学cos（总和））/originalFactor；
};
返回函数（内部）{
offsetAngle=Math.atan（inner.offsetWidth/inner.offsetHeight）；
原始高度=内。离视；
originalFactor=Math.sqrt（Math.pow（inner.offsetHeight，2）+Math.pow（inner.offsetWidth，2））；
返回{
旋转：功能（度）{
设置旋转（度，getScale（度），内部）；
}
}
};
}());
var outer=document.getElementById（'outer'），
内部=document.getElementById（'inner'），
旋转器=设置旋转器（内部），
度=0；
window.setInterval（函数（）{
度+=1；
如果（度>=360）{
度=0；
}
旋转器。旋转（度）；
}, 50);
}());

编辑：这是一幅试图解释我的代码逻辑的图片。：）

---

马蒂答案的简化版本

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+ ')';
}

var scaler=函数（id，度）{
var internal=document.getElementById（id）；
offsetAngle=Math.atan（inner.offsetWidth/inner.offsetHeight）；
原始高度=内。离视；
originalFactor=Math.sqrt（Math.pow（inner.offsetHeight，2）+Math.pow（inner.offsetWidth，2））；
var弧度=度*Math.PI/180，
总和、结果；
如果（度<90度）{
总和=弧度-偏移角度；
}否则，如果（度<180度）{
总和=弧度+偏移角；
}否则，如果（度<270）{
总和=弧度-偏移角度；
}否则{
总和=弧度+偏移角；
}
var结果=（originalHeight/Math.cos（sum））/originalFactor；
internal.style.webkitttransform='scale（'+result+'）；
internal.style.transform='scale（'+result+'）；
}

好吧，如果你想先发制人地缩小尺寸，使它永远不会离开容器，那么你需要的是斜边与短边的比率。50/sqrt（100^2+50^2）当用户旋转物品时，内部块应该改变大小吗？类似这样的吗？所以，它是在旋转时缩放的，如果确定旋转会使它离开外框的边界？我在JS中已经提出了这个。我知道这还不是100%（老实说，更像是50%），但应该给你一个开始。现在不能再花时间了。你似乎已经把它钉好了，先生！我很乐意接受这个答案。你能解释一下你的解决方案吗？虽然它很容易从发布的代码中派生出来，但它将帮助我和未来的读者理解逻辑！当然添加了一个图像进行解释，因为我不擅长用文字进行解释。：）你的形象做得很好！