css3(transform) 立體翻轉效果卡片

See the Pen ygivm by vialley (@vialley) on CodePen.

實作重點：

.card-container {
perspective: 700;

/*Chrome 和 Safari 支持替代的 -webkit-perspective 属性。*/
}

perspective 屬性定義3D 元素距視圖的距離，以像素計。該屬性允许改變 3D 元素查看 3D 元素的視圖。

當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。

註釋：perspective 屬性只影響 3D 轉換元素。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

.card{
transform-style: preserve-3d;
}
.back {
transform: rotateY(180deg);
}

transform-style 屬性規定如何在3D 空間中呈現被嵌套的元素。
註釋：該屬性必須與transform 屬性一同使用。

Firefox 支持 transform-style 属性。

Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。

backface-visibility 屬性定義當元素不面向屏幕時是否可見。
如果在旋轉元素不希望看到其背面時，該屬性很有用。

只有Internet Explorer 10+ 和Firefox 支持backface-visibility 屬性。
Opera 15+、Safari 和Chrome 支持替代的-webkit-backface-visibility 屬性。