## 3D卡片翻轉效果 ![](https://i.imgur.com/WuOgZ8O.png) 正在翻轉的卡片⧸⎩⎠⎞͏(・∀・)⎛͏⎝⎭⧹ ## 原理解說這個效果就像是你想要做一張雙面的卡片，設想是兩張不同的紙(元素)，我們可以先各自畫完內容，然後準備膠水，讓卡片A跟卡片B一正一反的黏起來。這樣子就完成了一個雙面可翻轉的卡片。 ## 程式碼內容 ### html的部分 ```htmlmixed=

Front Side

Back Side

``` 使用div準備了兩張卡片以及翻轉箱，翻轉箱裡面的內部另外放一個整合卡片A、卡片B的inner。 ### CSS的部分 #### 翻轉效果的hover ```css= .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } ``` 簡單的使用hover中rotateY讓它旋轉即可。 #### 兩張卡片先是針對兩張卡，因為背面那張是翻過來才會顯示的，所以要先讓它本身轉180度。就想像兩個人原本是面對面，現在要變成雙面人(?) 是不是要改成背對背？那麼其中一個人就是要轉180度。 ```css= .flip-box-front { background-color: #bbb; color: black; } .flip-box-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); //就是這邊這邊就是轉身的那個人XD } ``` #### 盒子與內部盒子的樣式 ```css= .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。大概的重點就是這兩個。 #### 前後卡片的樣式 ```css= .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-的意思（瀏覽器兼容）](https://kumo.tw/article.php?id=74) ## 一些英文單字的解釋！英文課開課！讓我們先對這個單字有點深入理解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. ``` ![](https://i.imgur.com/XzO4UvX.png) 可以理解為「...的平面」。 ### 單字理解-nested 這個可以理解為「嵌入」。 ### 單字理解-preserve ![](https://i.imgur.com/TrQcAAo.png) [劍橋辭典](https://dictionary.cambridge.org/dictionary/english-chinese-traditional/preserve) 可以理解為保存，讓某個東西使之...維持的那種感覺。 [更了解preserve-3d與rotateY的使用](https://www.w3schools.com/cssref/trycss3_transform-style_inuse.htm) ![](https://i.imgur.com/TrIuOBk.png) 可以在這裡玩看看，就發現這能製造轉動效果。 ## 語法運用深入介紹 ### perspective 這個單字意思還滿多的XD 可能要看範例才能知道用途，這邊可以理解為「透視」 ![](https://i.imgur.com/fXgflzr.png) 平常常見的意思比較像是（思考問題的）角度，觀點，想法，跟viewpoint一樣。 ![](https://i.imgur.com/BWCIyBH.png) ![](https://i.imgur.com/nXnRS5C.png) 卡斯伯前輩的文章也寫得很清楚，這邊提供給大家參考。 [CSS沒有極限 - CSS transform-3D的透視(perspective)](https://www.casper.tw/css/2013/10/11/css-perspective/) ### backface-visibility ![](https://i.imgur.com/5p1tcdc.png) 用來隱藏背後的元素內容。 [MDN效果示範](https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility) ### preserve-3d ``` The transform-style property specifies how nested elements are rendered in 3D space. ``` 這邊說這個 transform，簡單來想：就是可以「改變元素的顯示效果」是一個超級常見也超級好用的東西。 ![](https://i.imgur.com/iPl59dp.png) [MDN的解釋，非常清晰](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style) ![](https://i.imgur.com/v126akq.png) 會發現說要用CSS寫出3D的效果，就可以使用這個屬性！ ## 完整代碼樣子 ![](https://i.imgur.com/NEX3mOO.png) 沒錯，認識了這些CSS的3D屬性，我們終於搞定這個翻轉卡片的效果囉！ ## 心得後記看似簡單的招數，深入理解才會發現原來3D的世界是多麼遼闊廣大(❀╹◡╹) 其實這就像是學寫程式，往往簡單的網頁或是project，當真的動手操作的時候總是發現很多細節這是一件好事，代表我們又更往前了一步了呢！！覺得太難理解也沒關係，這條路還有很多玩意可以學，不用急著要一次走到飛天。如果還想要看到更多這種詳細解說，讓「簡單效果」也能學到「豐富知識」，請繼續關注，跟著我們這個系列繼續動手玩創意─=≡Σ((( つ•̀ω•́)つ