変換されたフォームから要素を取得する方法

Question

transform: scale(0.5, 0.5)で何かを作成しようとしていますが、このルールを適用すると、すべての要素は小さくなりますが、位置は変わりません。パディングも？

Answer 1

あなたはtransform-origin: 0 0を利用することができますが、それでもあなたの要件には不十分です。それがあなたのための選択肢なら、私はそれらの要素の親を変形することを提案することができます。

チェックこのfiddle、および参照のため、以下のコード：

.parent { 
    transform: scale(0.5, 0.5); 
    transform-origin: 0 0; 
} 
.transformed { 
    display: inline-block; 
    height: 100px; 
    width: 100px; 
    padding: 10px; 
    border: 1px solid lightgreen; 
    /* transform: scale(0.5, 0.5); */ 
    /* transform-origin: 0 0; */ 
} 

Answer 2

transform: scale();

HTML

<div class="parent"> 
    <div class="transformed"> 
    </div> 
    <div class="transformed"> 
    </div> 
</div> 

CSSは、実際にはDOMで要素のサイズを変更しません。代わりに、その要素を別のレイヤーに置き、GPU側でそのサイズを変更し、このレイヤーを使用して要素を表示し、同時に要素の元の位置と寸法を保持します。その要素を調べると、その枠線（青で囲まれている）が実際に画面上のものと異なることがわかります。

あなたの要素は、あなたがwidth、height、paddingような彼らの実際の寸法のプロパティを変更する必要があると思います他の要素に影響を与えるようにしたい場合など それは例えばアニメーションで使われている場合、これは真剣にあなたのページの性能に影響を与えることに注意してくださいこれらのプロパティは完全なレイアウトの再計算をトリガします。

あなたのレイアウトを変更していない要素を変換

クイックデモ：

.box 
 
{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    background: #ccc; 
 
    border: 10px solid green; 
 
    padding: 10px; 
 
    background-clip: content-box; 
 
} 
 

 
.recalc .box 
 
{ 
 
    animation: recalc 1s infinite alternate linear; 
 
} 
 

 
.transform .box 
 
{ 
 
    animation: scale 1s infinite alternate linear; 
 
} 
 

 
.container 
 
{ 
 
    display: inline-flex; 
 
    vertical-align: middle; 
 
    box-shadow: 0 0 0 1px blue; 
 
} 
 

 
@keyframes scale{ 
 
    0%{ 
 
    transform: scale(.5, .5); 
 
    }, 
 
    100%{ 
 
    transform: scale(1, 1); 
 
    } 
 
} 
 

 
@keyframes recalc{ 
 
    0%{ 
 
    width: 50px; 
 
    height: 50px; 
 
    border-width: 5px; 
 
    padding: 5px; 
 
    margin: 5px; 
 
    }, 
 
    100%{ 
 
    width: 100px; 
 
    height: 100px; 
 
    border-width: 10px; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    } 
 
}

<div class="container transform"> 
 
    <div class="box"> 
 
    Transform 
 
    </div> 
 
</div> 
 
<div class="container recalc"> 
 
    <div class="box"> 
 
    Prop changes 
 
    </div> 
 
</div>