CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

需要背景

プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背景画像は暗く、5つの領域に分割されています。毎回1つの領域が点灯し、画像全体が点灯してパズルが完成します。まずは最終的なレンダリングを見てみましょう。

背景画像ではなく div のみを回転させる CSS3 ダイヤモンド パズル

応用知識ポイント:

  • 背景サイズ
  • 背景位置
  • 変換:回転

実装のアイデア:

外側の大きなボックスは、暗い背景画像を保持するために使用されます。内部の 5 つのパズルピースは 5 つの div です。各パズルピースは、背景定位的方式を使用して、背景画像の固定領域を表示します。中央のパズルピースは回転します。しかし、回転後に別の問題が発生しました。背景画像も次のように回転してしまいました。

背景画像ではなく div のみを回転させる CSS3 ダイヤモンド パズル

背景の回転問題を解決するアイデアは、5 番目のパズルピースの外側の層にボックスを配置し、外側のボックスを右に 45 度回転させてから、背景要素を左に 45 度回転させることです。操作後、新たな問題が見つかりました。下の写真の黒い枠が外箱です(見やすくするため、他のパズルピースは非表示に設定されています)。外側のボックスにoverflow:hiddenが設定されている場合、中央のパズルの上部、下部、左側、右側の角が欠落します。

5 番目のパズルピースの幅と高さを大きくし、外側のボックスをoverflow:hidden設定する必要があります。幅と高さを大きく設定する場合は、対応するbackground-sizeも変更する必要があります。

背景画像ではなく div のみを回転させる CSS3 ダイヤモンド パズル

最後に、先ほど始めた効果を実現できます。完全な Vue コードは次のとおりです。

<テンプレート>
    <セクションクラス="ボックス">
        <div class="bg" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item1Show" class="item item1" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item2Show" class="item item2" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item3Show" class="item item3" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item4Show" class="item item4" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item5Show" class="item item5wrap">
            <div class="item5" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        </div>
    </セクション>
</テンプレート>
<スクリプト>
「@/assets/bg.jpeg」からbgImgをインポートします。
エクスポートデフォルト{
    データ() {
        戻る {
            画像,
            項目1表示: false、
            項目2表示: true、
            項目3表示: true、
            項目4表示: true、
            項目5表示: true
        };
    }
};
</スクリプト>
<スタイル lang="less">
@境界線の色: #333;
。箱 {
    マージン: 0px 自動;
    幅: 300ピクセル;
    高さ: 200px;
    背景色: #000;
    位置: 相対的;
    .bg {
        幅: 100%;
        高さ: 100%;
        位置: 絶対;
        左: 0;
        上: 0;
        背景の位置: 中央 中央;
        背景繰り返し: 繰り返しなし;
        背景サイズ: 100% 100%;
        不透明度: 0.5;
    }
    。アイテム {
        幅: 50%;
        高さ: 50%;
        ボックスのサイズ: 境界線ボックス;
        背景サイズ: 200% 200%;
        右境界線: 1px 実線 @borderColor;
        下部境界線: 1px 実線 @borderColor;
        位置: 絶対;
    }
    .item1 {
        背景位置: 0 0;
        左: 0;
        上: 0;
    }
    .item2 {
        背景位置: 100% 0;
        左: 50%;
        上: 0;
    }
    .item3 {
        背景位置: 0 100%;
        左: 0;
        上位: 50%;
    }
    .item4 {
        背景位置: 100% 100%;
        左: 50%;
        上位: 50%;
    }
    .item5ラップ{
        幅: 100ピクセル;
        高さ: 100px;
        左境界線: 1px 実線 @borderColor;
        上境界線: 1px 実線 @borderColor;
        変換: 回転(45度);
        左: 50%;
        上位: 50%;            
        変換: 移動(-50%, -50%) 回転(45度);
        オーバーフロー: 非表示;
        .item5 {
            幅: 150ピクセル;
            高さ: 150px;
            背景位置: 50% 50%;
            背景サイズ: 200% 133%;
            位置: 絶対;
            左: 50%;
            上位: 50%;
            変換: 移動(-50%, -50%) 回転(-45度);
        }
    }
}
</スタイル>

CSS3 ダイヤモンドパズルを使用して、div 背景画像を回転させずに回転させる方法についてはこれで終わりです。CSS3 回転画像に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  HTML と CSS に関する基本的なメモ (フロントエンドでは必読)

>>:  Dockerコンテナ間の通信を実装する方法

推薦する

XHTML: フレーム構造タグ

フレーム構造タグ <frameset></frameset>フレームを使用す...

Telnet は Alpine イメージの busybox-extras に移動されました

Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...

Javascript 操作メカニズム イベントループ

目次1. 4つのコンセプト1. JavaScriptはシングルスレッドです2. タスクキュー3. 同...

シンプルなカルーセル効果を実現するネイティブ js

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...

Linux のファイル圧縮とパッケージ化の概要

1. 圧縮と包装の概要一般的な圧縮ファイルウィンドウズ .rar .zip .7z Linux .z...

プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装

目次バイト機能使用環境プロジェクトを構築する構成vite.config.ts tsconfig.js...

nginx「504 ゲートウェイタイムアウト」エラーを解決する

ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...

Nginx転送マッチングルールの実装

1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...

Ubuntu ターミナル マルチウィンドウ 分割画面 ターミネーター

1. インストールターミネーターの最大の特徴は、1つのウィンドウで複数のターミナルを開くことができる...

Vue3 の ref と toRef の違いを簡単に分析します

1. refがコピーされ、ビューが更新されますrefを使用してオブジェクトのプロパティ値をレスポンシ...

JavaScript DOM オブジェクト操作

目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...

Ubuntu16.04はphp5.6ウェブサーバー環境を構築します

Ubuntu 16.04 はデフォルトで PHP7.0 環境をインストールしますが、PHP7 は一部...

優れたWebフォームデザイン事例20選

ソフィー・ハルダッククライドキー埠頭 37 東ソープボックス Rxバランス EEハーバー対比 SVN...

MySQLの構文、特殊記号、正規表現の詳細な説明

Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...

Linux での sshd サービスとサービス管理コマンドの詳細な説明

sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...