CSS Flip effect with different heights

Question

I've created a book slider where ech side takes 50% of width. For mobile the direction of the pages changes so that they are above eachother instead of next to each other. I need different heights for the pages. Images should be 30-40% and the content about 60-70% in height. The Flip effect crashes at this point. I guess it's because the height is changing as soon as the class is given. However it looks kind of weird. Could anybody help me to make it look like a page that actually flips down?

class BookSlider extends React.Component {
 constructor(props) {
  super(props);
  this.state = {slideCount: 0, slider: []};
  this.handleClick = this.handleClick.bind(this);
  this.resolveClassNames = this.resolveClassNames.bind(this);
}

componentDidMount() {
  let _this = this;
  let count = this.state.slideCount;
  // create slider elements 
  const slider = [];
  let initialContent = [];

  this.props.content.map((obj) => {
   if (obj.slideNo === 1) {
    initialContent.push(obj);
   }
 })
 slider.push({content: initialContent, slideNo: 1});


this.props.images.map((img) => {
  let contents = [];
  this.props.content.map((obj) => {
    if (img.slideNo + 1 === obj.slideNo) {
      contents.push(obj);
    }
  })
    const slide = {
      img: img.img,
      slideNo: img.slideNo,
      content: contents
    }
    slider.push(slide)
  })
  this.setState({slider})
}

handleClick(type) {
  if (type === 'next') {
    $(`#slide-${this.state.slideCount}`).next().addClass("flipped"); 
    $(`#slide-${this.state.slideCount + 2}`).addClass("active"); 
    $('.active').next().addClass('active-mute');
    this.setState({slideCount:  this.state.slideCount < (this.props.images.length - 1) ? 
    this.state.slideCount + 1 : 0});
  }
  if (type === 'prev') {
   $(`#slide-${this.state.slideCount - 1}`).next().removeClass("flipped");
   this.setState({slideCount: this.state.slideCount - 1 >= 0 ? this.state.slideCount - 1 : 
   this.props.images.length - 1});
  }
}

resolveClassNames(slideNo) {
  const { slideCount, slider } = this.state;
  if (slideCount === slideNo - 1) {
    return 'page active'
  }
  else if (slideCount - 1 === slideNo) {
    return 'page flipped active-mute';
  }
  else if (slideCount - 1 <= 0 && slideNo === (slider.length -1 )) {
    return 'page flipped active-mute';
  }
  else if (slideCount === slideNo && (slideCount < slider.length || slideCount === 0 && slideNo === 
  slideCount)) {
  return 'page flipped active';
}
else if (slideCount - 1 === slideNo && slideCount - 1 < 0 && (slideNo === (slider.length - 1))) {
  return 'page flipped active';
}
else if (slideCount + 2 === slideNo && slideCount + 2 <= (slider.length - 1)) {
  return 'page active-mute';
}
else if (slideCount + 2 > slideNo && (slideCount + 2) - (slider.length) === slideNo) {
  return 'page active-mute';
}
else {
  return 'page';
}
}

render() {
const { slider } = this.state;
return (
  <section
    className="partial-book-slider"
    >
    <div className="container-fluid">
      <div className="row">
        <div className="col-12 col-md-10 offset-md-1">
          <div 
            className='partial-book'
            data-aos="fade-up"
            data-aos-once="true"
            >  
            <div className="book-bg-left bg-primary">
              <div className="content-wrap">
                <div className='content h-100 d-flex justify-content-around flex-column'>
                  {slider[slider.length - 2] && slider[slider.length - 2].content && slider[slider.length - 2].content.map((obj, i) => {
                    const k = `slide_content_${i}`;
                    return (
                      <div  key={k} className="container-fluid">
                        <div className="row">
                          <div className="col-2 pr-0">
                            <div>
                              <img className="mw-100 text-white" src={obj.media.url}/>
                            </div>
                          </div>
                          <div className="col-10">
                            <div className="text-white font-weight-bold">{obj.title}</div>
                            <p>{obj.description}</p>
                          </div>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div> 
            </div>
            {slider[1] && slider[1].img && (
              <div className="book-bg-right">
                <div className="img-wrap" style={{'background-image': `url("${slider[1].img.url}")`}} />
              </div>
            )}
            {slider.map((slide, index) => {
              const key = `slide-${index}`;
              return (
                <div key={key} id={key} className={this.resolveClassNames(index)}>   
                  <div className="content-wrap">
                    <div className='content h-100 d-flex justify-content-around flex-column'>
                      {slide.content && slide.content.map((obj, i) => {
                        const k = `slide_${index}_content_${i}`;
                        return (
                          <div  key={k} className="container-fluid">
                            <div className="row">
                              <div className="col-2 pr-0">
                                <div>
                                  <img className="mw-100 text-white" src={`${obj.media.url}`}/>
                                </div>
                              </div>
                              <div className="col-10">
                                <div className="text-white font-weight-bold">{obj.title}</div>
                                <p>{obj.description}</p>
                              </div>
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  </div> 
                  {slide.img && (
                    <div className="img-wrap" style={{'background-image': `url("${slide.img.url}")`}} />
                  )}
                </div>
              )
            })}
          </div>
          <div className="text-center my-4 slider-controls">
            <button id="prev" onClick={(e) => this.handleClick('prev')}>
              PREV
            </button>
            <button id="next" onClick={(e) => this.handleClick('next')}>
              NEXT
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
);

} }

Here's my CodePen look at < 600px (mobile).

https://codepen.io/mblmarlon/pen/poJoVzx?editors=0110

Answer 1

Found a solution -> remove "transform-style: preserve-3d;"