split background into 3 divs flippable-CodePudding

I'm trying to apply a background into my html/css website but I also want to split this background into 3 divs who can flip when the cursor is hover.

So I guess the best to do could be to make 3 divs side by side (the total size of my screen) then to apply 3 backgrounds to these 3 divs but each of them are a different part of my background image.

Is anyone here can show me how to do that with a snippet please ?

CodePudding user response：

I have solved this question using an SVG file while you are using to use the same image but a separate part of it. Please let me know if you are looking for something like this, also, upvote my answer, I have some difficulties while uploading this code sample, still not what I wanted, but I'll let you what I have created for ya, I used the same image side by side, both of them complete the one image. try to re-create this sample below and let me know.

I forget to tell you, in the viewbox you can easily change that.

.flip-card {
                background-color: transparent;
                width: 400px;
                height: 400px;
                perspective: 1000px;
            }

            .flip-card-inner {
                position: relative;
                width: 100%;
                height: 100%;
                text-align: center;
                transition: transform 0.6s;
                transform-style: preserve-3d;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            }

            .flip-card:hover .flip-card-inner {
                transform: rotateY(180deg);
            }

            .flip-card-front, .flip-card-back {
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            .flip-card-front {
                background-color: #bbb;
                color: rgba(0, 0, 0, 0.62);
            }

            .flip-card-back {
                background-color: #2980b9;
                color: white;
                transform: rotateY(180deg);
            }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

        <h2>Let me know if you still need help Peter</h2>        
        
        <div >
            <div  id="card1">
                <div >
                    <div >

                        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
                             width="300.000000pt" height="300.000000pt" viewBox="-150 0 400.000000 400.000000" preserveAspectRatio="xMidYMid meet">
                            <g transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
                                <path d="M0 2000 l0 -2000 2000 0 2000 0 0 2000 0 2000 -2000 0 -2000 0 0
                                -2000z m620 -100 l0 -320 -25 0 -25 0 0 320 0 320 25 0 25 0 0 -320z m2700 0
                                l0 -320 -25 0 -25 0 0 295 0 296 -84 -71 c-47 -38 -87 -70 -90 -70 -3 0 -6 10
                                -5 23 0 29 170 167 205 167 l24 0 0 -320z m-2292 123 c13 -8 28 -25 34 -39
                                l11 -24 32 34 c60 65 162 67 209 3 19 -26 21 -44 24 -223 3 -188 3 -194 -17
                                -194 -19 0 -20 8 -23 191 l-3 191 -28 24 c-35 30 -85 31 -121 3 -50 -40 -56
                                -64 -56 -244 0 -155 -1 -165 -19 -165 -17 0 -19 12 -23 178 -5 217 -18 251
                                -98 251 -41 1 -70 -20 -99 -69 -19 -32 -21 -51 -21 -197 0 -156 -1 -163 -20
                                -163 -19 0 -20 7 -20 230 0 223 1 230 20 230 16 0 20 -7 20 -37 l0 -38 23 28
                                c41 51 119 65 175 30z m660 16 c30 -6 59 -20 73 -35 23 -25 24 -31 27 -225 3
                                -175 1 -199 -12 -199 -12 0 -16 10 -16 40 0 22 -2 40 -4 40 -2 0 -20 -16 -40
                                -35 -81 -76 -209 -68 -254 16 -8 14 -11 46 -9 78 3 47 9 59 40 87 40 37 79 49
                                185 59 l72 7 0 34 c0 18 -5 44 -11 58 -24 51 -126 60 -246 22 -19 -6 -23 -4
                                -23 13 0 24 42 38 157 50 7 0 34 -4 61 -10z m422 0 c28 -6 64 -22 80 -36 l30
                                -25 0 31 c0 25 4 31 21 31 20 0 21 -4 17 -104 -3 -117 -15 -144 -79 -181 -38
                                -22 -159 -27 -195 -7 -25 14 -44 -1 -44 -34 0 -36 26 -47 130 -55 153 -12 200
                                -45 200 -140 0 -35 -6 -48 -38 -79 -48 -49 -103 -64 -202 -57 -96 7 -140 22
                                -140 49 0 15 4 18 18 13 119 -51 260 -39 306 27 19 26 21 71 5 100 -15 28 -69
                                48 -128 48 -111 0 -191 34 -191 82 0 11 7 32 15 48 14 27 14 32 -5 62 -37 62
                                -18 157 41 201 22 16 63 30 101 36 4 1 30 -4 58 -10z m507 -10 c52 -19 82 -76
                                99 -186 l6 -43 -172 0 -173 0 7 -42 c9 -57 33 -104 62 -123 47 -30 145 -35
                                223 -10 15 5 21 2 21 -10 0 -36 -129 -55 -213 -31 -63 18 -106 61 -126 125
                                -14 48 -14 154 0 204 29 105 152 158 266 116z"/>
                                <path d="M1571 1816 c-120 -43 -103 -206 22 -206 87 0 157 75 157 166 l0 54
                                -72 -1 c-40 0 -88 -6 -107 -13z"/>
                                <path d="M1972 1976 c-34 -32 -37 -38 -37 -91 0 -51 3 -60 31 -84 78 -70 241
                                    -31 245 58 5 105 -40 151 -146 151 -49 0 -59 -4 -93 -34z"/>
                                <path d="M2453 1990 c-37 -22 -60 -61 -69 -119 l-7 -41 147 0 146 0 0 35 c0
                                    48 -22 97 -55 123 -37 29 -117 30 -162 2z"/>
                            </g>
                        </svg>

                    </div>
                    <div >
                        <h1>Div One</h1>
                        <span>Place some text here peter....</span>
                    </div>
                </div>
            </div>

            <div  id="card2">
                <div >
                    <div >

                        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
                             width="300.000000pt" height="300.000000pt" viewBox="250 0 400.000000 400.000000" preserveAspectRatio="xMidYMid meet">
                            <g transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
                                <path d="M0 2000 l0 -2000 2000 0 2000 0 0 2000 0 2000 -2000 0 -2000 0 0
                                -2000z m620 -100 l0 -320 -25 0 -25 0 0 320 0 320 25 0 25 0 0 -320z m2700 0
                                l0 -320 -25 0 -25 0 0 295 0 296 -84 -71 c-47 -38 -87 -70 -90 -70 -3 0 -6 10
                                -5 23 0 29 170 167 205 167 l24 0 0 -320z m-2292 123 c13 -8 28 -25 34 -39
                                l11 -24 32 34 c60 65 162 67 209 3 19 -26 21 -44 24 -223 3 -188 3 -194 -17
                                -194 -19 0 -20 8 -23 191 l-3 191 -28 24 c-35 30 -85 31 -121 3 -50 -40 -56
                                -64 -56 -244 0 -155 -1 -165 -19 -165 -17 0 -19 12 -23 178 -5 217 -18 251
                                -98 251 -41 1 -70 -20 -99 -69 -19 -32 -21 -51 -21 -197 0 -156 -1 -163 -20
                                -163 -19 0 -20 7 -20 230 0 223 1 230 20 230 16 0 20 -7 20 -37 l0 -38 23 28
                                c41 51 119 65 175 30z m660 16 c30 -6 59 -20 73 -35 23 -25 24 -31 27 -225 3
                                -175 1 -199 -12 -199 -12 0 -16 10 -16 40 0 22 -2 40 -4 40 -2 0 -20 -16 -40
                                -35 -81 -76 -209 -68 -254 16 -8 14 -11 46 -9 78 3 47 9 59 40 87 40 37 79 49
                                185 59 l72 7 0 34 c0 18 -5 44 -11 58 -24 51 -126 60 -246 22 -19 -6 -23 -4
                                -23 13 0 24 42 38 157 50 7 0 34 -4 61 -10z m422 0 c28 -6 64 -22 80 -36 l30
                                -25 0 31 c0 25 4 31 21 31 20 0 21 -4 17 -104 -3 -117 -15 -144 -79 -181 -38
                                -22 -159 -27 -195 -7 -25 14 -44 -1 -44 -34 0 -36 26 -47 130 -55 153 -12 200
                                -45 200 -140 0 -35 -6 -48 -38 -79 -48 -49 -103 -64 -202 -57 -96 7 -140 22
                                -140 49 0 15 4 18 18 13 119 -51 260 -39 306 27 19 26 21 71 5 100 -15 28 -69
                                48 -128 48 -111 0 -191 34 -191 82 0 11 7 32 15 48 14 27 14 32 -5 62 -37 62
                                -18 157 41 201 22 16 63 30 101 36 4 1 30 -4 58 -10z m507 -10 c52 -19 82 -76
                                99 -186 l6 -43 -172 0 -173 0 7 -42 c9 -57 33 -104 62 -123 47 -30 145 -35
                                223 -10 15 5 21 2 21 -10 0 -36 -129 -55 -213 -31 -63 18 -106 61 -126 125
                                -14 48 -14 154 0 204 29 105 152 158 266 116z"/>
                                <path d="M1571 1816 c-120 -43 -103 -206 22 -206 87 0 157 75 157 166 l0 54
                                -72 -1 c-40 0 -88 -6 -107 -13z"/>
                                <path d="M1972 1976 c-34 -32 -37 -38 -37 -91 0 -51 3 -60 31 -84 78 -70 241
                                    -31 245 58 5 105 -40 151 -146 151 -49 0 -59 -4 -93 -34z"/>
                                <path d="M2453 1990 c-37 -22 -60 -61 -69 -119 l-7 -41 147 0 146 0 0 35 c0
                                    48 -22 97 -55 123 -37 29 -117 30 -162 2z"/>
                            </g>
                        </svg>

                    </div>
                    <div >
                        <h1>Div Two</h1>
                        <span>Place some text here peter....</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

I have used a dummy image here at dummyimage.com more help about SVG at

CodePudding user response：

/* css reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  width: 100%;
}


/* ---- */

.image-canvas {
  display: flex;
  height: 100vh;
}

.image-section {
  flex-basis: calc(100% / 3);
  flex-grow: 1;
  height: 100vh;
  overflow: hidden;
  position: relative;
  transition: transform 1s;
  /*   backface-visibility: hidden; */
}

.image-section img {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.image-section:hover {
  transform: rotateY(180deg);
}

image-section.one img {
  left: calc(-1 * ((100vw / 3)) * 0);
}

.image-section.two img {
  left: calc(-1 * ((100vw / 3)) * 1);
}

.image-section.three img {
  left: calc(-1 * ((100vw / 3)) * 2);
  /* right: 0; */
}

<section >
  <div >
    <img src="https://picsum.photos/536/354" alt="">
  </div>
  <div >
    <img src="https://picsum.photos/536/354" alt="">
  </div>
  <div >
    <img src="https://picsum.photos/536/354" alt="">
  </div>
</section>

I have used the following series of steps to achieve your result:

Take a container and set it to full width of the screen.
Place three divs with one-third width of the total width inside of the container.
Make the container flex to place the partitions beside each other.
Place an img with the same src inside each of the partitions spanning the width of the screen.
Pull the second image by 100vw / 3 from the left.
Pull the third image by (100vw / 3) * 2 from left (or 0 from right).
Apply flip effect using transform: rotateY(180deg) and animation effect using transition: transform 1s to the images.

References: