中央の傾きを維持しながら、傾いたイメージ ギャラリーの端の傾きを直すにはどうすればよいですか?

複数の歪んだ画像の組み合わせの端の傾きを戻す

以前は、画像の組み合わせを効果的に歪ませる方法が検討されました。ただし、傾いた画像コンテナの左端 (box1) と右端 (box6) の傾きを解消しようとすると、課題が発生しました。

改善された解決策は次のとおりです。

提供された CSSこのコードは、コンテナ内の左端と右端の画像の傾きを効果的に変更し、内側の画像の傾いた外観を維持します。

実装:

1. 親コンテナの作成:

   • 画像の親として機能するクラス「gallery」を持つコンテナ要素collection.

2. スキュー変数の設定:

   • 傾斜のサイズを制御する変数 --s を初期化します。

3. ギャラリーのスタイル:

   • CSS グリッドを使用して画像を一列に配置し、垂直方向の中央に配置します。 .
   • 画像の幅を 0、最小幅を calc(100%) として定義しますvar(--s)) を使用して左傾斜を作成し、ポリゴン クリップパスを使用して画像をクリップして目的の形状を実現します。
   • CSS トランジションを活用して、ホバー時に画像をアニメーション化します。

4. 最初と最後を調整画像:

   • 最初の画像の最小幅を調整し (calc(100% var(--s)/2))、place-self: start を使用して、
   • 最後の画像に対してプロセスを繰り返しますが、place-self: end を終了し、右からスキューを開始するようにクリップパスを調整します。 edge.

5. ホバー効果の設定 (オプション):

   • 必要に応じて、CSS を追加してホバー効果を有効にします。選択した画像を展開し、動的なギャラリーを作成します

利点:

• このソリューションにより、内部の画像に影響を与えることなく、最終画像の傾きを制御できます。 .
• ホバー効果により、追加のインタラクティブ性と視覚的効果が得られます。
• コードはモジュール式であり、特定の設計要件に合わせて簡単にカスタマイズできます。

以上が中央の傾きを維持しながら、傾いたイメージ ギャラリーの端の傾きを直すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。