【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)

目录

【前端动手玩创意】等待的转圈圈效果 (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，
当真的动手操作的时候总是发现很多细节
这是一件好事，代表我们又更往前了一步了呢！！

觉得太难理解也没关係，这条路还有很多玩意可以学，
不用急着要一次走到飞天。

如果还想要看到更多这种详细解说，让「简单效果」也能学到「丰富知识」，
请继续关注，
跟着我们这个系列继续动手玩创意─=≡Σ((( つ•̀ω•́)つ