网页设计

翻转卡片的机制

翻转卡片是一种互动性很强的UI模式，这种模式的背后反映出图形界面上的“开关问题”。比如：

这里的“开关”是一个抽象概念，指用户每次都通过相同的输入触发界面中的某个UI元素在两个状态间切换。

类似的例子还有iOS控制中心的各种开关按钮，如下所示：

通常来说，翻转卡片的HTML结构可能是下面这个样子：

<div class="flipcard">
<div class="a-side">状态A</div>
<div class="b-side">状态B</div>
</div>

在这个HTML结构中，卡片正面或反面的内容分别使用不同的div容器来装载（div.a-side及div.b-side），而两个div容器的外面还会再包裹一层div容器（div.flipcard），方便定位和控制。

卡片翻转的效果是通过css的transform来实现的，设计效果图如下

利用transform和perspective属性来产生翻转透视效果

翻转透视

.wrapperbox{
 /*景深距离：即屏幕与透视灭点（这是一个单点透视）的距离。这个距离越大透视变形幅度越大。*/
   perspective: 600px;
   }
.innerbox{
  
   transform: rotateY( 45deg );
   }

利用backface-visibility控制元素翻转后的可见性


.innerbox{
   /*元素翻转后背面不可见*/
   backface-visibility: hidden;
   }

翻转透视

三要素分析
When	Who	What
点击.flipcard时，如果当前处于正面模式	.flipcard	进入背面模式 addClass("backmode");
点击.flipcard时，如果当前处于背面模式	.flipcard	退出背面模式，显示正面 removeClass("backmode");
文档加载完成时	.flipcard	绑定点击事件处理 on("click",function(){})