0

If I construct an image from 5 different pieces (for creating an effect), one simple method is to create 5 different classes with the same styling (I'm using react). The effect I would like to achieve is rotating each of the 5 parts of the image on hover. Here is the jsx:

var sectionStyle = {
            width: '100%',
            height: '100%',
            backfaceVisibility: 'hidden',
            backgroundImage: 'url(' + background + ')',
            backgroundSize: 'cover',
          };
    return(
       <div className="container1">
       <div className="thumb-details"></div>
       <div className="part p01">
           <figure className="f1" style={sectionStyle}/>
           <div className="f2"></div>
       </div>
       <div className="part p02">
           <figure className="f1" style={sectionStyle}/>
           <div className="f2"></div>
       </div>
       <div className="part p03">
           <figure className="f1" style={sectionStyle}/>
           <div className="f2"></div>
       </div>
       <div className="part p04">
           <figure className="f1" style={sectionStyle}/>
           <div className="f2"></div>
       </div>
       <div className="part p05">
           <figure className="f1" style={sectionStyle}/>
           <div className="f2"></div>
       </div>
   </div>

Then I can manually calculate the background-position of each figure class so that each figure image will start from where the previous ended:

.thumbnail {
 width: 100%;
 height: 20vw;
}

.container1 {
  width: 20vw;
  height: 20vw;
  position: absolute;
  /* background-color: blue; */
}

.thumb-details {
  max-width: 100%;
  height: 20vw;
  background-color: yellow;
  position: absolute;
  left:0;
  right:0;
  transition: opacity .2s ease-out;
}

.part {
  width: 20%;
  height: 100%;
  position: absolute;
  transform: rotateY(0deg);
  transform-style:preserve-3d;
  transition: all .5s ease-out;
}

.f1 {
  transform: rotateY(0deg);
}

.p01 {
  left: 0;
}

.p01 figure {
  background-position: 0px 0px;
}

.p02 {
  left: 20%;
}

.p02 figure {
  background-position: -4vw 0px;
}

.p03 {
  left: 40%;
}

.p03 figure {
  background-position: -8vw 0px;
}

.p04 {
  left: 60%;
}

.p04 figure {
  background-position: -12vw 0px;
}

.p05 {
  left: 80%;
}

.p05 figure {
  background-position: -16vw 0px;
}

.container1:hover .part {
  transform: rotateY(180deg);
}

It's just 20vw divded by 5, and then I set the background-position of each one (starting from the second) to start where the previous one ended.

This is working fine. Problem is - the image is not centered, I can't set its total width and height, because if I use "background-position: center", as I would like to, then I cannot track each part of the image anymore.

I hope it doesn't sound complicated. What I theoretically need is to calculate different offsets of the image (5 different offsets as I showed in the CSS) but to calculate it from the image after it's positioned to be centered. It's important because I want the image to be responsive.

Is it possible?

Thanks in advance

0xdw
  • 3,755
  • 2
  • 25
  • 40
sir-haver
  • 3,096
  • 7
  • 41
  • 85
  • Maybe a demo of some sorts? Off the top of my head, I'd immediately suggest a library, but not sure what you're trying to do here and how! – Predrag Beocanin Dec 09 '18 at 04:04
  • here is all what you need : https://stackoverflow.com/questions/51731106/using-percentage-values-with-background-position-on-a-linear-gradient/51734530#51734530 ... you will probably want the part where we combine % with px using calc – Temani Afif Dec 09 '18 at 08:26
  • Thanks for your help guys the guide is good but doesn't provide the answer to my situation I guess it's too unique so I abandon it for now, thanks anyways – sir-haver Dec 10 '18 at 00:07

0 Answers0