CSS3實現3D翻牌效果

斕曦發表於2018-06-07
CSSS33D

在實現這個效果之前，我們需要先理解一下css3中的perspective、transform-style、backface-visibility這三個屬性值。

1、概念理解

1.1 perspective

w3school上給perspective 的定義為： 3D 元素距檢視的距離，可以簡單理解成觀察者和物體之間的距離。在css3 3D層面，你也可以把它理解為表示3D效果的一個強度。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。

1.2 transform-style

transform-style：表示子元素需要遵循怎樣的空間體系規則。當子元素需要設定空間體系規則的時候，需要在其父元素中設定這個屬性。它有兩個值：

  1. flat表示所有子元素在2D平面呈現；
  2. preserve-3d表示所有子元素在3D空間中呈現；

1.3 backface-visibility

backface-visibility：表示當元素不面向螢幕時是否可見。如果在旋轉元素不希望看到其背面時，該屬性很有用。它同樣有兩個值：

  1. visible表示背面是可見的；
  2. hidden表示背面是不可見的；

2、如何實現

2.1 關鍵HTML程式碼

<div class="wrapper">
    <div class="card">
      <div class="card-face card-front">front</div>
      <div class="card-face card-back">back</div>
    </div>
</div>
複製程式碼

2.2 關鍵CSS程式碼

.wrapper {
  margin: 100px auto;
  border: 1px solid #ccc;
  width: 200px;
  height: 300px;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  &.active {
    transform: rotateY(180deg);
  }
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
  &.card-front {
    background-color: #f00;
  }
  &.card-back {
    background-color: #4577dc;
    transform: rotateY(180deg);
  }
}複製程式碼

當我們需要點選卡片實現前後反轉的時候，直接在card類上增減active類即可！

2.2 實際預覽效果

CSS3實現3D翻牌效果

3、小結

如果有什麼疑問或者更好的建議，歡迎在評論區留言。文筆有限，文中若有不正之處，萬望告知！


相關文章