這個CSS翻轉卡片效果是在滑鼠滑過上面的時候會有一個炫酷的旋轉，顯示下面的後面卡片，並且有發光的效果。下面分享一下這個程式碼：

HTML程式碼：

<div class="flip">
	<div class="flip-box">
		<a href="http://caibaojian.com/" target="_blank" class="flip-item flip-item-front">
			<img src="weibo.jpg" alt="">
			<span class="flip-item-text">前端開發部落格</span>
		</a>

		<a href="http://hao.caibaojian.com/" target="_blank" class="flip-item flip-item-back">
			<div class="flip-item-bling"></div>
			<img src="manong.jpg" alt="">
			<span class="flip-item-text">碼農頭條</span>
		</a>
	</div>
</div>

CSS程式碼：

.flip {
	transform:translate3d(0,0,0);
	margin:40px;
}
.flip-box {
	position:relative;
	width:110px;
	height:140px;
	overflow:hidden;
}
.flip-item {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:all .5s ease-in-out;
	transform-style:preserve-3d;
	backface-visibility:hidden
 
;
	border:1px solid #ddd;
	box-sizing:border-box;
}
.flip-item img {
	width:70px;
	height:70px;
	border-radius:100%;
	margin:32px auto;
	display:block;
}
.flip-item-text {
	position:absolute;
	bottom:8px;
	left:0;
	width:100%;
	text-align:center;
	color:#fff;
}
.flip-item-front {
	transform:rotateY(0deg);
	z-index
 
:2;
	background:#fff;
}
.flip-item-back {
	transform:rotateY(180deg);
	z-index:1;
	background:#009fff;
}
.flip-item-back .flip-item-text {
	color:#fff;
}
.flip-box:hover .flip-item-front {
	z-index:1;
	transform:rotateY(180deg);
}
.flip-box:hover .flip-item-back {
	z-index:2;
	transform:rotateY(0deg);
}
.flip-item-bling {
	position:absolute;
	top:50%;
	left:50%;
	width:200px;
	height:200px;
	margin-top:-100px;
	margin-left:-100px;
	background:url(animation.png) center no-repeat;
	z-index:-1;
}
.flip-box:hover .flip-item-bling {
	transform:translate3d(0,0,0);
	animation:rotate infinite 10s linear;
}
@keyframes rotate {
	0% {
	transform-origin:center;
	transform:rotate3d(0,0,1,0deg);
}
100% {
	transform-origin:center;
	transform:rotate3d(0,0,1,360deg);
}
}

css3 backface-visibility 屬性

隱藏被旋轉的 div 元素的背面：

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
-moz-backface-visibility:hidden; 	/* Firefox */
-ms-backface-visibility:hidden; 	/* Internet Explorer */
}

定義和用法·

backface-visibility 屬性定義當元素不面向螢幕時是否可見。

如果在旋轉元素不希望看到其背面時，該屬性很有用。

CSS3 transform-style 屬性

使被轉換的子元素保留其 3D 轉換：

//code from http://caibaojian.com/3d-flip-card.html
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg);	/* Safari 和 Chrome */
-webkit-transform-style: preserve-3d;	/* Safari 和 Chrome */
}

transform-style 屬性規定如何在 3D 空間中呈現被巢狀的元素。

CSS3 transform 屬性

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

CSS3 perspective 屬性

設定元素被檢視位置的檢視：

div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}

perspective 屬性定義 3D 元素距檢視的距離，以畫素計。該屬性允許您改變 3D 元素檢視 3D 元素的檢視。

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

總結：

在使用CSS 3D變換的屬性時，開啟GPU硬體加速，transform:translate3d(0,0,0);，使用上面這個程式碼能提升效能。

要想更好的理解這個案例，需要你熟悉上面這幾個屬性的使用。以上CSS程式碼中沒有加入相應的字首，請使用autoprefixer外掛自行加入。

下面的表格列出了所有的轉換屬性：