web-dev-qa-db-ja.com

CSS変換スケール、子要素をスケールしない

いくつかの子要素を持つdivがあり、それがcss変換スケーリングされている場合。スケーリングしたくない子要素が1つあります

#parent{
    -webkit-transform: scale(.5);
}
 
span:last-child{
    -webkit-transform: Something to ignore the parent scale;
}
<div id="parent">
    <span>Child 1</span>
    <span>Child 2</span>
    <span>Child 3 (Don't Scale Me)</span>
</div>

これはcssのみで実行できますか？ htmlを変更したり、jsを使用したりしません。

csscss3transform
18
Matt Coady

残念ながら、これは不可能です。

ただし、おおよそ次の2つのオプションがあります。

  1. スケーリングしたくない要素を除く、他のすべての要素をスケーリングします（ただし、これはコンテナーをスケーリングしません）。
  2. コンテナを拡大縮小し、拡大したくない要素を拡大縮小します（ただし、これによりおそらくぼやけて見えます）。

例：

// Example 1.
span:not(:last-child) {
    display: inline-block; /* You can't scale inline elements */
    transform: scale(2);
}

// Example 2.
#parent{
    transform: scale(.5);
}

span:last-child{
    transform: scale(2);
}
9
Reinier Kaper

きれいな出力（ぼやけていない）を目的としたすべてのブラウザソリューションですが、htmlを少し変更します。

よりクリーンな出力で、htmlコードを少し変更する別の解決策は、要素をスケーリングする必要がある親要素の外側に配置することです。

その後、子divを相対に設定します。ここで、上の値を0から親の高さを引いた値に設定し、左に0を設定します。

このようにして、子要素は影響を受けず、ぼやけることもありません。

私にとって、このソリューションは常にうまくいきました。

この似たような質問を見てください。ただし、コードが少ないため、はるかに簡単な例があります。 親要素をスケーリングし、子要素のスケーリングを削除します

#parent {
  height: 200px; width: 300px;
  background: beige;
  transition: transform 0.3s linear;
  transform-Origin: top left;
}

#child {
  /* top value 0 is minus the height of parent*/
  top: -200px; left: 0px;
  position: relative;
  pointer-events: none;
}

.scale {
  transition: transform 0.3s linear;
  transform-Origin: top left;
}

#parent:hover {
  transform: scale(2.0);
  transition: transform 0.3s linear;
}

/* affect child elements by hover, too */
#parent:hover + #child > .scale {
  transform: scale(2.0);
  transition: transform 0.3s linear;
}

/* set span to block for transforming */
span {
  display: block;
  padding-bottom: 10px;
}
<div id="parent">
</div>

<div id="child">
  <span class="scale">Child 1</span>
  <span class="scale">Child 2</span>
  <span>Child 3 (Don't Scale Me)</span>
</div>

コードスニペットメモ

/ *変換のためにブロックにスパンを設定* /

スパンでCSS3変換を使用するにはどうすればよいですか？

/ *ホバーによって子要素にも影響します* /

divがホバーされたときに他の要素に影響を与える方法 以上 「+」（プラス記号）CSSセレクターの意味は？

結論

スケールは常にサブ要素に影響するため、きれいな出力を取得する他のソリューションはないと思いますが、この回避策を実行できます。

これは、divの固定位置でも機能するはずです。

いずれにしても、きれいな出力を得るには、htmlコードを変更する必要があります。

3
Daniel Patrick

この#parent > span:not(:last-child)のような、より詳細なセレクターを使用する必要があると思います。 例 。

2
sgromskiy

私は hack for Chromeの問題を解決するために。

#parent { transform: scale(5);}
#child  { transform: scale(0.2)  translate3d( 0, 0, 0);}
0
Aikon Mogwai