Рассчитать background-position на основе 'background-position: center'? - PullRequest
Новая
       29

Рассчитать background-position на основе 'background-position: center'?

0 голосов
/ 09 декабря 2018

Если я создаю изображение из 5 разных частей (для создания эффекта), одним простым способом является создание 5 разных классов с одинаковым стилем (я использую реагирование).Эффект, которого я хотел бы достичь, - это вращение каждой из 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 каждого из них (начиная со второго) так, чтобы он начинал там, где заканчивался предыдущий.

Это работает нормально.Проблема в том, что изображение не центрировано, я не могу установить его общую ширину и высоту, потому что, если я использую «background-position: center», как мне хотелось бы, то я больше не могу отслеживать каждую часть изображения.

Надеюсь, это не кажется сложным.Теоретически мне нужно рассчитать различные смещения изображения (5 различных смещений, как я показал в CSS), но рассчитать его по изображению после того, как оно будет отцентрировано.Это важно, потому что я хочу, чтобы изображение было отзывчивым.

Возможно ли это?

Заранее спасибо

...