64

CSS3 のプロパティtransform: scaleを操作していると、興味深い問題が見つかりました。写真に少しズーム効果を加えたかったのです。しかし、親 divoverflow: hiddenとを使用するとborder-radius、子 div が親 div を超えて拡張されました。

アップデート：

問題は解決していません。を追加transitionしても、まだ機能しません。この問題を解決しようとしましたが、成功しませんでした。

ここにデモがあります

4

14 に答える 14

28

透明な境界線は機能しませんでしたが、.wrap div と画像の z-index を変更すると機能しました (私の場合、画像は実際にはビデオです)。

CSSは次のとおりです。

.videoContainer{
    overflow: hidden;
    z-index: 10;
}

video{
    margin-left: -55%;
    transform: scale(-1,1);
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    z-index: 0;
}

注: z-index を適切に機能させるために要素を配置する必要性については、以下の Jake Blues のコメントを参照してください。

于 2014-06-05T09:36:42.210 に答える
18

この発行者を解決する両方の方法がうまくいきました。

  1. 次の行を親ラッパーに追加します (z-index: 0イメージ自体には必要ありません)。position: relative; z-index: 10

  2. または、親ラッパーに追加transform: translateZ(0);します (ブラウザーのサポートを向上させるための対応するプレフィックスを使用)

于 2015-07-28T20:48:49.737 に答える
10

これは、合成されたレイヤーが親レイヤーによってクリッピングされていないために発生します。そのため、正しく適用できるように、親をoverflow:hidden独自の合成レイヤーに移動する必要がある場合があります。overflow:hidden

transform: translateZ(0)したがって、変換された要素の親要素にCSS プロパティを追加する必要があります。

/* add to parent so it is composited on its own layer before rendering */
.parent-of-transformed-element {
     -webkit-transform:translateZ(0);
     transform:translateZ(0);
}

次にoverflow:hidden、変換された要素を、変換された子のように独自のレンダリング レイヤーに合成することで機能します。

iOS および非 iOS デバイスの最新の Safari および Chrome でテスト済み

于 2016-02-16T17:12:20.477 に答える
3

下手な英語でごめんなさい。

ページに要素が配置されていない場合、コンテナー要素と子要素の z-index 属性の両方を設定する必要はありません。

z-index: 0(またはその他) 属性をコンテナ要素に追加するだけです。

.container {
    border-radius: .14rem;
    overflow: hidden;
    z-index: 0;
}
.child {

    }
于 2019-05-25T08:04:17.680 に答える
0

マスクがスケーリングされている場合、バグは Webkit ブラウザー (iOS の Safari および Chrome) にまだ存在します。そして、上記の回避策はすべて機能しません。ただし、非標準の css プロパティ-webkit-mask-box-imageを使用すると、スケーリングされたマスクにも役立ちます。

于 2015-07-07T21:05:26.587 に答える
0

Chrome ビルド 78.0.3904.87 で、親要素will-change: transformでborder: 1px solid transparent,を試した後、transform: translateZ(0)成功しなかったため、border-radiusを 50% から 49% に減らすことで問題を解決できました。border-radius: 50%特殊なケースのようです。

だから私の実用的な解決策は次のとおりです。

.parent {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  border-radius: 49%;
}

.child {
  z-index: 0;
  position: absolute;
}
于 2019-11-11T09:19:12.440 に答える
0

私は長い間これを求めてきましたが、私のために働いたのはこれだけrotate(0.1deg) translateZ(0)です。したがって、要素をスケーリングしている場合

.something:hover img{

    -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -o-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    transform: scale(1.1) rotate(0.1deg) translateZ(0);

}

回転しないと、私の側では修正が機能しません。

任意のimg親に変換を追加する場合(画像があるコンテナーを回転させるなど)、たとえば要素に同じ修正を追加する必要があります。

.something_parent{
    transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
}
于 2018-03-08T21:07:45.517 に答える