Webkit バグ トラッカー: https://bugs.webkit.org/show_bug.cgi?id=110056
関連する質問: Chrome CSS3 3D Transform のバグ
クロムでは、幅/高さの値が大きい要素で css を使用すると、要素のサイズや数がしきい値に達すると、画面の一部が描画されなくなります。
次のテスト ページを参照してください: http://jsfiddle.net/AxkEj/35/
注: オレンジ色のコンテナーに変換スケールがあり、実際のピクセル サイズよりもはるかに小さく表示されます。幅を (ページの指示に従って) 7000 px 程度に拡大すると (画面サイズなどのさまざまな要因によって異なります。
コード例 (SO 規則に準拠するため):
body {
background: red;
} 本体、div { パディング: 0; マージン: 0; } h1 { font-size:20px; 余白:10px; } .wrapper { 幅: 5000px; 高さ: 5000px; -webkit-transform: スケール(0.125); -webkit-transform-origin: 0 0 0; -moz-transform: スケール(0.125); -moz-変換元: 0 0 0; 背景: オレンジ; }
.wrapper div { float:left; 高さ:46%; 幅:46%; マージン:2%; } .wrapper:hover > div { -webkit-transform:rotateX(45deg); -moz-transform: 回転X(45度); }
.rz { 背景: 紫; }
.wrapper:hover .rz { -webkit-transform:rotateZ(45deg); -moz-transform: 回転Z(45度); }