效果展示：
代碼展示：
[html]
<div class="card">
??<div class="card-inner">
????<div class="font"></div>
????<div class="back"></div>
??</div>
</div>
[css]
.card?{
??width: 100px;
??height: 161.8px;
??perspective: 1000px;?/*定義3D元素的視圖距離*/
}
.card-inner?{
??width: inherit;
??height: inherit;
??position: relative;
??transition: 0.5s;
??transform-style: preserve-3d;?/*子元素將保留其 3D 位置。*/
}
.font,.back?{
??width: 100%;
??height: 100%;
??position: absolute;
??backface-visibility: hidden;?/*隱藏被旋轉(zhuǎn)的 div 元素的背面*/
}
.font?{
??background: PaleTurquoise;
??transform: rotateY(180deg);
}
.back?{
??background: Moccasin;
??transform: rotateY(0);
}
.card:hover?.card-inner?{
??transform: rotateY(180deg);
}
代碼：JS Bin
參考代碼：翻轉(zhuǎn)撲克
