這裏是純CSS的另一種方式（如要求）
的JavaScript在這裏我想補充更快
反正我修改的功能sothat可以HTMLElement的直接添加到功能的元素增加了需要翻轉的各種div。
甲& B，其中A是前，B是背面。
在這個例子中我添加了6個元素到頁面。
這裏是測試元素
var D,
flip=function(A,B){// HTMLElement,HTMLElement - no text
var box=D.createElement('div');
box.appendChild(D.createElement('div')).appendChild(A);
box.appendChild(D.createElement('div')).appendChild(B);
return box;
},
init=function(){
D=window.document;
for(var i=0,f=D.createDocumentFragment();i<6;i++){
var a=D.createTextNode('Front '+i),
b=D.createTextNode('Back '+i);
f.appendChild(flip(a,b));
}
D.getElementsByClassName('flip')[0].appendChild(f);
}
window.onload=init;
正如你可以看到任何事件監聽器或複雜的代碼，如果你使用CSS3，你完全可以把上的div的:hover，而不需要的javascript的JavaScript（的mouseenter，鼠標離開）。
將此動畫添加到每個元素，我爲元素的容器添加了一個類。
html,body{width:100%;height:100%;margin:0;padding:0;} /* important */
.flip{
width:100%;height:100%; /* in this case the perspective center */
-webkit-perspective:1200; /* is in the page center */
}
.flip>div{
width:200px;height:160px; /* width && height of the flip box */
float:left;
margin:16px;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 600ms ease;/* animation speed is 600ms */
}
.flip>div>div{
width:100%;height:100%; /*to fit the flip container*/
-webkit-backface-visibility:hidden;/* hide the back side */
line-height:160px;text-align:center;/*center the text*/
background-color:grey;/* both sides color */
}
.flip>div>:nth-child(2){
-webkit-transform:rotateY(180deg);
margin-top:-160px;/* hack so no need for position absolute*/
}
.flip>div:hover{
/*-webkit-transition:all 1000ms ease 1000ms;
want to close it slowly with a delay? */
-webkit-transform:rotateY(180deg);
}
/* no position relative or absolute which slows down ios */
這是writtenfor WebKit瀏覽器（CHROM，Safari瀏覽器，安卓，IOS） 我做到了我的ipad。
要使用它與firefox和最新的支持css3的ie，你需要用-moz，-ms，-o前綴複製這個-webkit樣式並檢查支持。
這個例子是基於3d的，所以容器也有一個透視值。 和元素在真實3D中翻轉，因此您觸發各種瀏覽器上的HW GPU加速。
的HTML只需要使用classallows您可以添加多個翻轉元件的多個容器類flip
該容器。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flip</title>
//add here the links to css3 or the <style>
//add here the the script or link to the script
</head>
<body><div class="flip"></div></body>
</html>
所以這是很簡單的，你可以看到，但在這個基礎，你可以創建VERI令人印象深刻的動畫只是changind翻轉CSS。
如果你需要一些更先進的功能，你可以處理程序與JavaScript事件
transitionend
，如果你想添加的框中手動這是所有你需要編寫。
<div class="flip">
<div>
<div>Element1 Front</div>
<div>Element1 Back</div>
</div>
<div>
<div>Element2 Front</div>
<div>Element2 Back</div>
</div>
</div>
要triggerthe動畫上點擊/的MouseEvent /的dragEvent /表示ScrollEvent什麼？
與.flip>div.flipped
，並在事件的JavaScript取代.flip>div:hover
this.parentNode.classList.toggle('flipped')
或
this.parentNode.classList.add('flipped') & this.classList.remove('flipped')
現在，這是所有關於現代瀏覽器，並使用現代的JavaScript & & CSS3，但只要你想無論如何翻轉你需要一個現代的瀏覽器。 也jQuery的不能翻轉的東西在IE6
像往常一樣
的JavaScript處理事件或添加多個元素
CSS創建頁面
- 的風格
html只是一個基本的結構。
其他任何問題，只是問
小提琴（測試鍍鉻）
http://jsfiddle.net/gNB3z/2/
看起來好像沒什麼問題..所有元素翻轉，因爲我鼠標移到他們。我明白了，他們不回覆。 – Halcyon嘗試將鼠標懸停在1個元素@FritsvanCampen上，等待它翻轉，然後將光標移開 – Liam
也適用於我。 –