web-dev-qa-db-ja.com

CSS：「transform：scale（）;」の間違った位置コンテナの子供

スケーリングされた長いコンテンツのコンテナー要素があります：

.container {
  transform: scale(0.9);
}

このコンテナ内には、ポップアップとして使用される子divがあります。絶対に上に配置されます50%

.popup {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
}

残念ながら、コンテナをスケーリングすると、この50%は機能しません。ページの下部に表示される場合は、~240%を使用する必要があります。

スケーリングされた要素の子に位置を適用することについて、具体的なことはありますか？

デモ：http://labs.voronianski.com/test/scaled-positioning.html

csscss-positiontransformscale
16
Kosmetika

.wrapに追加：

.wrap {
  ...
  position: relative;
  /*some prefix*/-transform-Origin: 0 0;
}

.popupを再配置する必要があります（参照フレームはhtml要素ではなく.wrapです）。ただし、Chromeこの変更後、スケール切り替えは正常に機能します。

参照： FirefoxでCSSスケールを使用する場合、要素は元の位置を維持します

22
rvidal