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
可以理解為保存，讓某個東西使之...維持的那種感覺。
可以在這裡玩看看，就發現這能製造轉動效果。
語法運用深入介紹
perspective
這個單字意思還滿多的XD
可能要看範例才能知道用途，這邊可以理解為「透視」
平常常見的意思比較像是（思考問題的）角度，觀點，想法，跟viewpoint一樣。
卡斯伯前輩的文章也寫得很清楚，這邊提供給大家參考。
CSS沒有極限 - CSS transform-3D的透視(perspective)
backface-visibility
用來隱藏背後的元素內容。
preserve-3d
The transform-style property specifies how nested elements are rendered in 3D space.
這邊說這個 transform，簡單來想：就是可以「改變元素的顯示效果」
是一個超級常見也超級好用的東西。
會發現說要用CSS寫出3D的效果，就可以使用這個屬性！
完整代碼樣子
沒錯，認識了這些CSS的3D屬性，我們終於搞定這個翻轉卡片的效果囉！
心得後記
看似簡單的招數，深入理解才會發現原來3D的世界是多麼遼闊廣大(❀╹◡╹)
其實這就像是學寫程式，往往簡單的網頁或是project，
當真的動手操作的時候總是發現很多細節
這是一件好事，代表我們又更往前了一步了呢！！
覺得太難理解也沒關係，這條路還有很多玩意可以學，
不用急著要一次走到飛天。
如果還想要看到更多這種詳細解說，讓「簡單效果」也能學到「豐富知識」，
請繼續關注，
跟著我們這個系列繼續動手玩創意─=≡Σ((( つ•̀ω•́)つ