Question

如果我用5个不同的片段（用于创建效果）构建图像，一种简单的方法是使用相同的样式创建5个不同的类（我正在使用react）。我想实现的效果是悬停时旋转图像的5个部分。这是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>

然后，我可以手动计算每个图形类的背景位置，以便每个图形图像将从上一个结束点开始：

.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);
}

只有20vw除以5，然后我将每个背景的背景位置（从第二个开始）设置为上一个结束的位置。

这很好。问题是-图像未居中，我无法设置其总宽度和高度，因为如果我按照自己的意愿使用“ background-position：center”，那么我将无法再跟踪图像的每个部分。 / p>

我希望这听起来并不复杂。从理论上讲，我需要计算图像的不同偏移量（如我在CSS中所示，有5个不同的偏移量），但是要在图像居中后从图像中计算出来。这很重要，因为我希望图像能够响应。

有可能吗？

预先感谢

计算基于“ background-position：center”的背景位置？

0 个答案: