Calculate background-position based on 'background-position:center'? - css

Question

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