CSS在容器内部旋转元素 [英] CSS rotate element while staying inside container

问题描述

如果你看一下： http://jsfiddle.net/KA4dz/

在此演示中，您可以清楚地看到内部元素由于其旋转而到达外部元素之外。请求是缩小内部元素（同时保持宽高比和中心定位），使其适合其容器。

In this demo, you can clearly see the inner element reaching outside of the outer element due to its rotation. The request is to scale down the inner element (while maintaining aspect ratio's and center positioning) just so it fits within its container.

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

The use-case is that the user can manually rotate such an inner element while ensuring that it stays within the outer element. (so simply scaling down until it fits for the eyes is not a solution).

这是一个我的数学技能显然缺乏的情况。发布我试过的东西在这个阶段不会做得很好。有人能指出我正确的方向吗？

This is a scenario where my math skills are clearly lacking. Posting what I've tried wont do much good at this stage. Can someone point me in the right direction?

谢谢！

另一项要求是仅内部元素在需要时缩小，但在不需要时缩小（必要时意味着离开外部元素的边界）

One additional requirement is that the inner element only scales down whenever its required but never scales down when its not required (where required means leaving the boundaries of the outer element)

要保存点击：

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

This was interesting. Here's my solution: http://jsfiddle.net/fletiv/jrHTe/

javascript看起来像这样：

And javascript looks like this:

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

}());

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

Here's an image which tries to explain the logic of my code. :)

这篇关于CSS在容器内部旋转元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！