點擊卡片圖標實現翻轉效果

1、效果

2、需求

點擊圖標實現翻轉功能,能夠重復點擊實現多次翻轉功能

 <div id="myCard" class="myCard">
   <div @click="handleFlip" id="container" class="container">
      <div id="face" class="face">
        正面
      </div>
      <div id="back" class="back">
        反面
      </div>
    </div>
</div>

<script>
export default {
  name: "Mall",
  components: {},
  data() {
    return {
      flag: true
    };
  },
  methods: {
    handleFlip() {
      let container = document.getElementById('container')
      container.style.transform = this.flag ? 'rotateY(180deg)':''
      this.flag = !this.flag
    }
  }
};
</script>

<style scoped>
  .myCard {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  .container {
    position: relative;
    transition: all 0.5s;
    width: 160px;
    height: 250px;
    padding: 20px;
    transform-style: preserve-3d;
  }
  .face,
  .back {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    backface-visibility:hidden;
  }
  .face {
    z-index: 1;
    background-color: antiquewhite;
  }
  .back {
    transform: rotateY(180deg);
    background-color: aqua
  }
</style>

3、總結

1.由於需要多次點擊翻轉，設置了一個flag標識符，默認true，每調用一次翻轉方法， flag取反，判斷flag，是否翻轉還是恢復
2.可能背面和前面都有內容，這樣的話，背面的內容同樣會顯示出來，所以要使用
backface-visibility:hidden;讓后面的內容隱藏起來
3.由於翻轉的div會覆蓋前面的div 所以需要在前面的div中設置 z-index: 1
4.注意： 不要在 .face和 .back中使用 overflow屬性，可能會使3d模式失效
5.注意：transform-style: preserve-3d 和 perspective: 1000px必須設置在 .face 和 .back的父級元素中