目錄

【前端動手玩創意】等待的轉圈圈效果 (1)

【前端動手玩創意】google五星評分的星星(2)

【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)

【前端動手玩創意】一句CSS做出好看的hero section！(4)

【前端動手玩創意】創造一個Skill bar(5)

【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)

【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)

【前端動手玩創意】讓你的PDF檔案更難被抓取(8)

【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)

【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)

3D卡片翻轉效果

正在翻轉的卡片⧸⎩⎠⎞͏(・∀・)⎛͏⎝⎭⧹

原理解說

這個效果就像是你想要做一張雙面的卡片，設想是兩張不同的紙(元素)，
我們可以先各自畫完內容，
然後準備膠水，讓卡片A跟卡片B一正一反的黏起來。

這樣子就完成了一個雙面可翻轉的卡片。

程式碼內容

html的部分

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>

使用div準備了兩張卡片以及翻轉箱，翻轉箱裡面的內部另外放一個整合卡片A、卡片B的inner。

CSS的部分

翻轉效果的hover

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

簡單的使用hover中rotateY讓它旋轉即可。

兩張卡片

先是針對兩張卡，因為背面那張是翻過來才會顯示的，所以要先讓它本身轉180度。
就想像兩個人原本是面對面，現在要變成雙面人(?)
是不是要改成背對背？

那麼其中一個人就是要轉180度。

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);  //就是這邊  這邊就是轉身的那個人XD
}

盒子與內部盒子的樣式

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;  //使用透視效果  詳解裡面有講解  這是CSS寫3D必備
}


.flip-box-inner {
  position: relative; //設定為老爸(父元素)  前後卡片要用絕對元素
  width: 100%;  // 裝滿盒子即可
  height: 100%; //同上
  text-align: center;
  transition: transform 0.8s;  //速度設定  自己可以調整
  transform-style: preserve-3d;
}

這邊基本上就是設定一下寬高，把大小弄出來之後，盒子加上透視(perspective)，
內盒子給予preserve-3d。
大概的重點就是這兩個。

前後卡片的樣式

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;  //詳解有解釋這個 隱藏背後內容的效果  CSS寫3D常見
}

這個的重點是設定為絕對元素，另外有趣的是因為現在有兩張卡片，
我們必須先隱藏背面的卡片。
這裡用了很酷的屬性，不需要JS也可以做到的招數。

也就是 backface-visibility
其實它在3D是很常見的屬性唷！

-webkit-的話則是為了支援瀏覽器(Chrome、Safari)所用的 其實不用太在意

真的很在意，超求甚解的話可以看下面文章：
CSS -webkit-、-moz-、-o-的意思（瀏覽器兼容）

一些英文單字的解釋！英文課開課！

讓我們先對這個單字有點深入理解XD，來上個英文課。

會發現今天這篇文章多了非常多英文，

不要覺得苦惱或是想跳過，這是我們過關斬將的必經路程，
我會用最簡單的方式解說(◉３◉)

單字理解-the plane of

The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

可以理解為「...的平面」。

單字理解-nested

這個可以理解為「嵌入」。

單字理解-preserve

劍橋辭典

可以理解為保存，讓某個東西使之...維持的那種感覺。

更了解preserve-3d與rotateY的使用

可以在這裡玩看看，就發現這能製造轉動效果。

語法運用深入介紹

perspective

這個單字意思還滿多的XD

可能要看範例才能知道用途，這邊可以理解為「透視」

平常常見的意思比較像是（思考問題的）角度，觀點，想法，跟viewpoint一樣。

卡斯伯前輩的文章也寫得很清楚，這邊提供給大家參考。

CSS沒有極限 - CSS transform-3D的透視(perspective)

backface-visibility

用來隱藏背後的元素內容。

MDN效果示範

preserve-3d

The transform-style property specifies how nested elements are rendered in 3D space.

這邊說這個 transform，簡單來想：就是可以「改變元素的顯示效果」
是一個超級常見也超級好用的東西。

MDN的解釋，非常清晰

會發現說要用CSS寫出3D的效果，就可以使用這個屬性！

完整代碼樣子

沒錯，認識了這些CSS的3D屬性，我們終於搞定這個翻轉卡片的效果囉！

心得後記

看似簡單的招數，深入理解才會發現原來3D的世界是多麼遼闊廣大(❀╹◡╹)
其實這就像是學寫程式，往往簡單的網頁或是project，
當真的動手操作的時候總是發現很多細節
這是一件好事，代表我們又更往前了一步了呢！！

覺得太難理解也沒關係，這條路還有很多玩意可以學，
不用急著要一次走到飛天。

如果還想要看到更多這種詳細解說，讓「簡單效果」也能學到「豐富知識」，
請繼續關注，
跟著我們這個系列繼續動手玩創意─=≡Σ((( つ•̀ω•́)つ