CSS 在容器内旋转元素

问题描述

如果你看看: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 在容器内旋转元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！