8

見てみると：http://jsfiddle.net/KA4dz/

このデモでは、内側の要素が回転によって外側の要素の外側に到達していることがはっきりとわかります。要求は、コンテナー内に収まるように、(縦横比と中央の配置を維持しながら) 内部要素を縮小することです。

ユースケースは、ユーザーが外側の要素内にとどまるようにしながら、そのような内側の要素を手動で回転できることです。（したがって、目に収まるまで単純に縮小することは解決策ではありません）。

これは、私の数学のスキルが明らかに不足しているシナリオです。私が試したことを投稿しても、この段階ではあまり効果がありません。誰かが私を正しい方向に向けることができますか?

ありがとう！

追加の要件の 1 つは、内側の要素が必要な場合にのみ縮小し、不要な場合は縮小しないことです (必要な場合は、外側の要素の境界を離れることを意味します)。

クリックを保存するには:

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

2 に答える 2

17

これは面白かったです。これが私の解決策です: 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);

}());

編集:これは、私のコードのロジックを説明しようとする画像です。:)

ここに画像の説明を入力

于 2013-11-05T17:56:39.497 に答える