13

幅/高さの変更からCSS回転divトリガーの上部/左再配置に続いて、CSS回転と動的な幅/高さを解決するための助けが必要です。

transform-origin要素の幅または高さが更新されると同時に、動的に更新する必要があることを理解し、考えています。私はクロスブラウザの巧妙さではなく、技術的な解決策にのみ興味があるので、デモ-webkitではプレフィックスのみを使用します。

HTML

<div id="wrap">
    <div id="rotated">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    Width: <input id="width" type="range" min="20" max="400" step="1" value="200">
    Height: <input id="height" type="range" min="20" max="400" step="1" value="100">
    Angle: <input id="angle" type="range" min="0" max="360" step="1" value="0">
</div>

CSS

#rotated {
    background:lightblue;
    border:1px dotted #000;
    height:100px;
    width:200px;
    position:absolute;
    top:300px;
    left:100px;
    overflow:hidden;
}

#width, #height, #angle {
    display:block;
    margin-bottom:10px;
    width:200px;
}

JavaScript

$('#width').change(function() {
    $('#rotated').css({width:this.value + 'px'});
});

$('#height').change(function() {
    $('#rotated').css({height:this.value + 'px'});
});

$('#angle').change(function() {
    $('#rotated').css({'-webkit-transform': 'rotate(' + this.value + 'deg)'});
});

2番目のデモでは、CSSを追加します

#rotated {
    -webkit-transform-origin: 100px 50px;
    -webkit-transform: rotate(60deg);
}

角度スライダーvalueのをに更新します60

Angle: <input id="angle" type="range" min="0" max="360" step="1" value="60">

x, yスライダーを使用して幅/高さを変更すると、位置を移動せずに要素が寸法で拡大および縮小するという点で、正しい結果が生成されます。ただし、要素を回転させると、目的の（中心点）原点を中心に回転しなくなります。

私はこれにいくつかのバリエーション（マウスダウン、マウスムーブ、変更）を試しましたが、幅/高さを変更する前に原点を設定すると思いましたが、<div>位置はまだシフトしています。

$('#width, #height, #angle').change(function() {
    $('#rotated').css({'-webkit-transform-origin': $('#width').val()/2 + 'px' + $('#height').val()/2 + 'px'});
});

jQueryはCSSの変更を同時に適用していると思いますが、幅/高さを変更する前に原点を更新する必要があると思います。

基本的に、シェイプがすでに回転している場合は、幅/高さを変更するときに、シェイプが常に中心点を中心に回転し、移動しないようにします。

4

1 に答える 1

14

フィドルデモ!!!

なぜこれが起こっているのかをまず説明します。ご覧のとおり、div が回転していない場合は問題ありません。では、なぜこの奇妙な動作が起こっているのでしょうか?

回答: あなたが求めているからです... 高さや幅を変更すると、div の 50% または中間点が変化します。したがって、ブラウザーは、回転されていない DIV の新しい 50% になるように div を配置し、それを回転させます。

解決策は、回転した div を別の div (「#wrapper」としましょう) で固定幅と高さでラップすることoverflow:visibleです。

次に、#rotated を #wrapper 内に配置し、幅または高さの変更時に、変更を計算し、#rotated div を常に #wrapper の中心になるように変換します (たとえば、幅の場合、変換は - (wrapWidth-newWidth)/2 )。

次に、ラッパーを回転させて出来上がりです。

セットアップに基づくコードは次のとおりです。

HTML:

<div id="wrap">
    Width: <input id="width" type="range" min="20" max="400" step="1" value="200">
    Height: <input id="height" type="range" min="20" max="400" step="1" value="100">
    Angle: <input id="angle" type="range" min="0" max="360" step="1" value="60">
</div>
<div id="rotateWrap">
    <div id="rotated">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

CSS :

#width, #height, #angle {
    position:relative;
    display:block;
    margin-bottom:10px;
    width:200px;
}

#rotateWrap{
    position:absolute;
    overflow:visible;
    height:100px;
    width:200px;
    top:200px;
    left:100px;
    outline:2px solid red;
    -webkit-transform-origin: 50% 50%;

}

#rotated {
    background:lightblue;
    position:relative;
    overflow:hidden;
    height:100px;
}

#wrap{
    position:absolute;
}

ジャバスクリプト

wPrev=$("#rotateWrap").width();
hPrev=$("#rotateWrap").height();

$('#width').mousedown(function(){
}).change(function() {
    $("#rotated").width(newW=$(this).val())
        .css({left: -(newW-wPrev)/2 + "px"});
});

$('#height').mousedown(function(){
}).change(function() {
    $("#rotated").height(newH=$(this).val())
        .css({top: -(newH-hPrev)/2 + "px"});
});


$('#angle').change(function() {
    $("#rotateWrap").css({"-webkit-transform":"rotate("+$(this).val()+"deg)"});
});
于 2011-09-01T19:07:59.653 に答える