[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために

背景

プロジェクトを行うためにvueを使用して、ビジネスはパズル効果を持つ必要があり、デフォルトでは暗い背景の地図は、トップは5つの領域に分割され、それぞれの時間は、地域を点灯し、全体のマップが点灯し、パズルが完了します。それでは、最終結果を見てみましょう。

知識を応用して

• 背景サイズ
• 背景位置 {を使用します。 {を使用します。 トランスフォーム：回転

実装のアイデア。

外側の大きな箱は暗い背景画像を置くのに使われ、中の5つのパズルのピースは5つのdivで、パズルの各ピースには

The background is positioned in a way that

この記事は、CSS3ダイヤモンドパズルについてのみdivの背景画像を回転させる達成するために、この関数が導入されていない、より関連するCSS3の回転画像の内容は、スクリプトホーム以前の記事を検索したり、次の関連記事を閲覧し続け、私はあなたが将来的にスクリプトホームをよりサポートすることを願ってください！.