CSS3 diamond puzzle realizes the function of rotating only div background image without rotation

Time:2021-9-21

Demand background

For projects made with Vue, there is a puzzle effect for business requirements. By default, it is a dark background image, which is divided into five areas, one area will be lit each time, the whole picture will be lit, and the puzzle is completed. Let’s take a look at the final rendering first.

CSS3 菱形拼图 实现只旋转div 背景图片不旋转

Knowledge points applied:

  • background-size
  • background-position
  • transform:rotate

Implementation idea:

The big box on the outer layer is used to put the dark background picture. The five puzzles inside are five div’s, and each puzzle is usedHow to locate the backgroundShow the fixed area of the background image, and the puzzle in the middle is rotated. However, after the rotation, there is another problem: the background picture also rotates, as follows:

CSS3 菱形拼图 实现只旋转div 背景图片不旋转
 

Idea of solving background rotation: you can put a box on the outer layer of the fifth puzzle, rotate the outer box 45 degrees to the right, and then rotate the elements of the background 45 degrees to the left. After the operation, a new problem is found. The black border in the figure below is the outer box (for convenience, other puzzle blocks are set to be invisible). If the outer box is setoverflow:hidden, then the upper, lower, left and right corners of the middle puzzle will be missing.

We need to set the width and height of the fifth puzzle larger, and then set the outer boxoverflow:hidden。 If the width height setting is large, the correspondingbackground-sizeChange, too.

CSS3 菱形拼图 实现只旋转div 背景图片不旋转
 

Finally, the initial effect can be achieved. The complete Vue code is as follows:


<template>
    <section class="box">
        <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>
    </section>
</template>
<script>
import bgImg from "@/assets/bg.jpeg";
export default {
    data() {
        return {
            bgImg,
            item1Show: false,
            item2Show: true,
            item3Show: true,
            item4Show: true,
            item5Show: true
        };
    }
};
</script>
<style lang="less">
@borderColor: #333;
.box {
    margin: 0px auto;
    width: 300px;
    height: 200px;
    background-color: #000;
    position: relative;
    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.5;
    }
    .item {
        width: 50%;
        height: 50%;
        box-sizing: border-box;
        background-size: 200% 200%;
        border-right: 1px solid @borderColor;
        border-bottom: 1px solid @borderColor;
        position: absolute;
    }
    .item1 {
        background-position: 0 0;
        left: 0;
        top: 0;
    }
    .item2 {
        background-position: 100% 0;
        left: 50%;
        top: 0;
    }
    .item3 {
        background-position: 0 100%;
        left: 0;
        top: 50%;
    }
    .item4 {
        background-position: 100% 100%;
        left: 50%;
        top: 50%;
    }
    .item5wrap {
        width: 100px;
        height: 100px;
        border-left: 1px solid @borderColor;
        border-top: 1px solid @borderColor;
        transform: rotate(45deg);
        left: 50%;
        top: 50%;            
        transform: translate(-50%, -50%) rotate(45deg);
        overflow: hidden;
        .item5 {
            width: 150px;
            height: 150px;
            background-position: 50% 50%;
            background-size: 200% 133%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
        }
    }
}
</style>

This is the end of this article about CSS3 diamond puzzle to realize the function of rotating only div background pictures without rotating. For more information about CSS3 rotating pictures, please search the previous articles of developpaer or continue to browse the relevant articles below. I hope you will support developpaer in the future!