ポートフォリオ サイトをいじっていたところ、(Google Chrome) 画面を 400% にズームインしてフッターに焦点を合わせたときに、流体グリッドと一致しない要素がいくつかあることに気付きました。私はこれを修正する必要があることを知っています (素晴らしい流動的なレイアウトのために要素を配置する方法についてアイデアやアドバイスがある場合は、投稿してください)。 2 つの個別の CSS3 トランジション対応パラメーター (不透明度と幅、以下のコード) を適用した要素は、元の配置から「実際のサイズ」ビューで保持される場所へのスムーズでゆっくりとしたトランジションを行います。
http://jsfiddle.net/Asustaba/VLw7k/
これが紛らわしい場合はお詫び申し上げます。何が起こっているのかについてより良いアイデアが必要な場合は、移行のビデオへのリンクを添付できます.
.grower{
-moz-transform: scale(.85);
-webkit-transform: scale(.85);
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.grower:hover{
-moz-transform: scale(1);
-webkit-transform: scale(1);
}
.grower_big{
-moz-transform: scale(1);
-webkit-transform: scale(1);
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.grower_big:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
誰もこれに遭遇しましたか?要素の絶対配置、相対配置、または通常のフロー配置の間でトランジション ベースの移動 (イーズ イン アウト) を設定することはできますか? 視差ベースの Web レイアウト内で表示するとどうなるでしょうか?