在模态内单击的值上翻转模态

Question

我有一个用例，其中我翻转了相同的模态卡，并在单击初始渲染的模态中的值时显示了一些不同。我使用了布尔模态和旋转，css横切面。但是在旋转180度的时候，背面的文字有点像镜像，但是如果我用360度旋转的话可以纠正。但是360度不会给人以翻转的感觉。

有没有办法使翻页角度为180度并且在背面也正确获取文字？

  

.FetchModal {
  .modal{
    perspective: 1000px;
  }
  .modal-content {
    height: 100%;
    @include from($desktop) {
      width: 90%;
    
    }
    transition: transform 0.8s;
    transform-style: preserve-3d;
    animation-direction:reverse;
  }
  .modalFlip {
    transform: rotateY(-360deg);
  }
 
  
 

}

<div className="FetchModal">
        <div className={classnames("modal is-thin", { "is-active": show })}>
          <div
            className="modal-background"
            onClick={() => this.handleToggle(false)}
          />
          <div
            className={classnames("modal-content", {
              modalFlip: this.state.flipped,
            })}
          >
{this.state.flipped?<div className="box">Fliiped</div>:<div className="box">Click me to flip</div>}
  </div>
          <button
            className="modal-close is-large"
            aria-label="close"
            onClick={() => this.handleToggle(false)}
          />
        </div>