為什么我點擊鼠標(biāo)沒有翻轉(zhuǎn)效果，郁悶！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>海報畫廊</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
background-color:#fff;
color:#555;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
-webkit-font-smoothing:antialiased;
}
.wrap{
width:100%;
height:600px;
position:absolute;
top:50%;
margin-top:-300px;
background:#333;
overflow:hidden;
-webkit-perspective:800px;/*使他的子元素獲得3D元素支持，這里是設(shè)置子元素距離試圖的位置*/
}
/*海報樣式*/
.photo{
width:260px;
height:320px;
position:absolute;
z-index:1;
box-shadow:0 0 1px rgba(0,0,0,01);
}
.photo .side{
width:100%;
height:100%;
background:#eee;
position:absolute;
top:0;
right:0;
padding:20px;
box-sizing:border-box;
}
.photo .side-front .image{
width:100%;
height:250px;
line-height:250px;
overflow:hidden;
}
.photo .side-front .image img{width:100%;}
.photo .side-front .caption{
text-align:center;
font-size:16px;
line-height:50px;
}/*side-back在上,side-front在下，side-front會被side-back遮擋住*/
.photo .side-back .desc{
color:#666;
font-size:14px;
line-height:1.5em;
}
/*當(dāng)前選中的海報樣式*/?
.photo_center{
left:50%;
top:50%;
margin:-160px 0 0 -130px;
z-index:999;
}
/*負(fù)責(zé)翻轉(zhuǎn)*/
.photo-wrap{
position:absolute;
width:100%;
height:100%;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;/*使被轉(zhuǎn)換的子元素支持3D的效果*/
transition:all 1s;
-webkit-transition:all 1s;
}
/*side-back在上旋轉(zhuǎn)180度呈現(xiàn)鏡像不可見（backface-visibility:hidden），side-front在下旋轉(zhuǎn)0度呈現(xiàn)正像可見*/
.photo .side-front{
-webkit-transform: rotateY(0deg);
? ? -moz-transform: rotateY(0deg);
? ? -ms-transform: rotateY(0deg);
? ? -o-transform: rotateY(0deg);
? ? transform: rotateY(0deg);
}
.photo .side-back{
-webkit-transform: rotateY(180deg);
? ? -moz-transform: rotateY(180deg);
? ? -ms-transform: rotateY(180deg);
? ? -o-transform: rotateY(180deg);
? ? transform: rotateY(180deg);
}
/*隱藏被旋轉(zhuǎn)的div元素的背面*/
.photo-wrap .side{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/*整體旋轉(zhuǎn)0度，反面在上呈現(xiàn)倒像不可見，正面在下呈現(xiàn)正像且可見 */
.photo_front .photo-wrap{
-webkit-transform: rotateY(0deg);
? ? -moz-transform: rotateY(0deg);
? ? -ms-transform: rotateY(0deg);
? ? -o-transform: rotateY(0deg);
? ? transform: rotateY(0deg);
}
/*整體旋轉(zhuǎn)180度，反面在下呈現(xiàn)正像可見，正面在上呈現(xiàn)倒像不可見 */
.photo_back .photo-wrap{
-webkit-transform: rotateY(180deg);
? ? -moz-transform: rotateY(180deg);
? ? -ms-transform: rotateY(180deg);
? ? -o-transform: rotateY(180deg);
? ? transform: rotateY(180deg);
}
</style>
<script type="text/javascript">
? ? function turn(elem){
? ? ? ? var cls=elem.className;
? ? ? ? if(/photo_front/.test(cls)){
? ? ? ? ? ? cls=cls.replace(/photo_front/,'photo_back');
? ? ? ? ? ? }else{
? ? ? ? ? ? cls=cls.replace(/photo_back/,'photo_front');
? ? ? ? ? ? }
? ? ? ? ? ? return elem.className=cls; ? ?
? ? ? ? }
</script>
</head>
<body ?onselectstart="return false;">
<div class="wrap">
<!--photo負(fù)責(zé)平移，旋轉(zhuǎn)-->
<div class="photo photo_center photo_front onclick="turn(this)">
? ? ? ? ? ??
<!--photo-wrap負(fù)責(zé)3d翻轉(zhuǎn)-->
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="image/35.jpg"></p>
<p class="caption">豪華跑車</p>
</div>
<div class="side side-back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
2019-01-02
<div class="photo photo_center photo_front onclick="turn(this)"> 兄弟 這句代碼不報錯嗎？? 本身就報錯，還需要自己找錯誤？
2018-11-08
<div class="photo photo_center photo_front"? onclick="turn(this)">
?你的 onclick="turn(this)" 應(yīng)該寫在冒號后面、
2018-08-30
<div class="photo photo_center photo_front onclick="turn(this)">
如果你還在慕課網(wǎng)學(xué)習(xí)的話??
這段代碼里面 class類名少了一個“，不知道是不是問題的關(guān)鍵? 不過這個肯定是錯誤的
2017-02-08
謝謝你的回答，這個問題一直讓我很蛋疼
2017-01-16
大兄弟告訴你一個讓你嗶狗的理由，你的代碼有大神幫你檢查過了，所以我們假設(shè)你的代碼是按著老師要求一步一步做的那么是沒有任何錯誤的，其實我的效果和你一模一樣，點擊后可以翻轉(zhuǎn)但是就是沒有那個動畫效果，那么為啥不能出現(xiàn)翻轉(zhuǎn)動畫效果呢？于是我從凌晨12點試到現(xiàn)在終于找到了
.photo-wrap{
position:absolute;
width:100%;
height:100%;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;/*使被轉(zhuǎn)換的子元素支持3D的效果*/
transition:all 1s;
-webkit-transition:all 1s;
}
黑體部分是問題所在改成如下
transition:all 1s linear;（或ease ease-in ease-out ease-in-out）
-webkit-transition:all 1s linear;（或ease ease-in ease-out ease-in-out）
就可以翻轉(zhuǎn)動畫了，我也不知道為什么也許OSX操作系統(tǒng)比Windows屌？
2017-01-14
檢查了好幾遍還是沒有效果