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

<テンプレート>
    <セクションクラス="ボックス">
        <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度);
        }
    }
}
</スタイル>