为什么我点击鼠标没有翻转效果，郁闷！
qq_梦屿千寻_3
2017-01-14 15:14
<!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元素支持，这里是设置子元素距离试图的位置*/
}
/*海报样式*/
.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;
}
/*当前选中的海报样式*/
.photo_center{
left:50%;
top:50%;
margin:-160px 0 0 -130px;
z-index:999;
}
/*负责翻转*/
.photo-wrap{
position:absolute;
width:100%;
height:100%;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;/*使被转换的子元素支持3D的效果*/
transition:all 1s;
-webkit-transition:all 1s;
}
/*side-back在上旋转180度呈现镜像不可见（backface-visibility:hidden），side-front在下旋转0度呈现正像可见*/
.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);
}
/*隐藏被旋转的div元素的背面*/
.photo-wrap .side{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/*整体旋转0度，反面在上呈现倒像不可见，正面在下呈现正像且可见 */
.photo_front .photo-wrap{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/*整体旋转180度，反面在下呈现正像可见，正面在上呈现倒像不可见 */
.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负责平移，旋转-->
<div class="photo photo_center photo_front onclick="turn(this)">
<!--photo-wrap负责3d翻转-->
<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>
6回答
-
- 慕侠2155777
- 2019-01-02 15:44:48
<div class="photo photo_center photo_front onclick="turn(this)"> 兄弟 这句代码不报错吗？ 本身就报错，还需要自己找错误？
-
- qq_慕妹0379784
- 2018-11-08 11:35:02
<div class="photo photo_center photo_front" onclick="turn(this)">
你的 onclick="turn(this)" 应该写在冒号后面、 -
- 想转IT的机械狗
- 2018-08-30 15:28:00
<div class="photo photo_center photo_front onclick="turn(this)">
如果你还在慕课网学习的话
这段代码里面 class类名少了一个“，不知道是不是问题的关键 不过这个肯定是错误的
-
- qq_梦屿千寻_3
- 2017-02-08 10:12:13
谢谢你的回答，这个问题一直让我很蛋疼
-
- 慕粉3988711
- 2017-01-16 02:48:07
大兄弟告诉你一个让你哔狗的理由，你的代码有大神帮你检查过了，所以我们假设你的代码是按着老师要求一步一步做的那么是没有任何错误的，其实我的效果和你一模一样，点击后可以翻转但是就是没有那个动画效果，那么为啥不能出现翻转动画效果呢？于是我从凌晨12点试到现在终于找到了
.photo-wrap{
position:absolute;
width:100%;
height:100%;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;/*使被转换的子元素支持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）
就可以翻转动画了，我也不知道为什么也许OSX操作系统比Windows屌？
-
- qq_梦屿千寻_3
- 2017-01-14 15:14:49
检查了好几遍还是没有效果
CSS3+JS 实现超炫的散列画廊特效
46090 学习 · 215 问题
相似问题