设置3d效果时，并没有side_back在上，而是side_front在上面先显示，为什么
行走的指尖
2016-08-15 16:18
为什么我的加了翻转之后，没有side_back在上面，而是side_front在上面
源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片画廊</title>
<style>
*{padding:0;margin:0;}
body{background:#fff;color:#555;font-family:'Avenir Next','微软雅黑';font-size:14px;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}
.wrap{width:100%;height:600px;position:absolute;top:50%;margin-top:-300px;background:#333;overflow:hidden;}
/*海报样式*/
.photo{width:260px;height:320px;position:absolute;z-index: 1;box-shadow:0 0 1px rgba(0,0,0,0.01);-webkit-perspective:800px;perspective:800px;}
.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 .caption{text-align:center;font-size:16px;line-height:50px;}
.desc{color:#666;font-size:14px;line-height:1.5em;}
/*当前选中的海报样式*/
.photo_center{left:50%;top:50%;width:260px;height:320px;margin:-160px 0 0 -130px;z-index:999;}
/*负责翻转*/
.photo_wrap{position:absolute;width:100%;height:100%;-webkit-transform-style:preserve-3d;}
.photo_wrap .side_front{-webkit-transform:rotateY(0deg);}
.photo_wrap .side_back{-webkit-transform:rotateY(180deg);}
</style>
</head>
<body>
<div>
<!-- photo 负责平移和旋转 -->
<div class="photo photo_center">
<!-- photo_wrap负责翻转 -->
<div>
<div class="side side_front">
<p><img src="images/pic1.jpg" alt=""></p>
<p>标题标题标题</p>
</div>
<div class="side side_back">
<p>描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
4回答
-
- 追觅梦初的国度
- 2016-09-29 21:23:06
.photo .side-back{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .photo .side-front{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }一个0deg 面对屏幕 一个180deg背对屏幕。当然是0deg在上面啊，面对我们，所以我们才能看见了。背对我们的也设置了3d效果，只是背对我们看 不见而已。自己多看看基础了！！！
-
- 行走的指尖
- 2016-09-07 09:55:21
那个应该无所谓，我没有改过来，但是后面完成的样式是没问题的，下面是中间版本，给你个参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片画廊</title>
<style>
*{padding:0;margin:0;}
body{background:#fff;color:#555;font-family:'Avenir Next','微软雅黑';font-size:14px;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}
.wrap{width:100%;height:600px;position:absolute;top:50%;margin-top:-300px;background:#333;overflow:hidden;-webkit-perspective:800px;}
/*海报样式*/
.photo{width:260px;height:320px;position:absolute;z-index: 1;box-shadow:0 0 1px rgba(0,0,0,0.01);}
.photo .side{width:100%;height:100%;background:#eee;position:absolute;top:0;right:0;padding:20px;box-sizing:border-box;-webkit-backface-visibility:hidden;}
.photo .side_front .image{width:100%;height:250px;line-height:250px;overflow:hidden;}
.photo .side_front .image img{width:100%;}
.photo .caption{text-align:center;font-size:16px;line-height:50px;}
.desc{color:#666;font-size:14px;line-height:1.5em;}
/*当前选中的海报样式*/
.photo_center{left:50%;top:50%;width:260px;height:320px;margin:-160px 0 0 -130px;z-index:999;}
/*负责翻转*/
.photo_wrap{position:absolute;width:100%;height:100%;-webkit-transform-style:preserve-3d;-webkit-transition:all .6s;}
.photo_wrap .side_front{-webkit-transform:rotateY(0deg);}
.photo_wrap .side_back{-webkit-transform:rotateY(180deg);}
.photo_front .photo_wrap{-webkit-transform:rotateY(0deg);}
.photo_back .photo_wrap{-webkit-transform:rotateY(180deg);}
</style>
</style>
</head>
<body onselectstart="return false">
<!--2. 改写视图,为模板字符串 -->
<div id="wrap">
<!-- photo 负责平移和旋转 -->
<div class="photo photo_front" onclick="turn(this)" id="photo_{{index}}">
<!-- photo_wrap负责翻转 -->
<div>
<div class="side side_front">
<p><img src="images/{{img}}" alt=""></p>
<p>{{caption}}</p>
</div>
<div class="side side_back">
<p>{{desc}}</p>
</div>
</div>
</div>
</div>
<script src="images/data.js"></script>
<script>
//1.翻面控制
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;
}
//3.通用函数
function g(selector){
var method = selector.substr(0,1) == '.' ? 'getElementsByClassName' : 'getElementById';
return document[method](selector.substr(1));
}
//4.输出所有海报
var data = data;
function addPhotos(){
var template = g('#wrap').innerHTML;
var html = [];
for(s in data){
var _html = template
.replace('{{index}}',s)
.replace('{{img}}',data[s].img)
.replace('{{caption}}',data[s].caption)
.replace('{{desc}}',data[s].desc);
html.push(_html);
}
g('#wrap').innerHTML = html.join(' ');
rsort(random([0,data.length]));
}
addPhotos();
//5.排序海报
function rsort(n){
var _photo = g('.photo');
var photos = [];
for(s=0;s<_photo.length;s++){
_photo[s].className = _photo[s].className.replace(/\s*photo_center\s*/,' ');
photos.push( _photo[s] );
}
var photo_center = g('#photo_'+ n);
photo_center.className += ' photo_center ';
photo_center = photos.splice(n,1)[0];
//把海报分为左右区域两个部分
var photos_left = photos.splice(0,Math.ceil(photos.length/2));
var photos_right = photos;
var ranges = range();
for(s in photos_left){
var photo = photos_left[s];
photo.style.left = random(ranges.left.x) + 'px';
photo.style.top = random(ranges.left.y) + 'px';
photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+ 'deg)';
}
for(s in photos_right){
var photo = photos_right[s];
photo.style.left = random(ranges.right.x) + 'px';
photo.style.top = random(ranges.right.y) + 'px';
photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+ 'deg)';
}
console.log(photos_left.length,photos_right.length);
}
//6.计算左右分区的范围{left:{x:[min,max],y[min,max]}}
function range(){
var range = { left:{ x:[], y:[] }, right:{ x:[], y:[] }};
var wrap = {
w:g('#wrap').clientWidth,
h:g('#wrap').clientHeight
}
var photo = {
w:g('.photo')[0].clientWidth,
h:g('.photo')[0].clientHeight
}
range.wrap = wrap;
range.photo = photo;
range.left.x = [0 - photo.w, wrap.w/2 - photo.w/2];
range.left.y = [0 - photo.h, wrap.h];
range.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w];
range.right.y = range.left.y;
return range;
}
//随机生成一个值(0~20),支持取值范围random[min,max]
function random(range){
var max = Math.max(range[0],range[1]);
var min = Math.min(range[0],range[1]);
var diff = max - min;//差值
var number = Math.ceil(Math.random() * diff + min);
return number;
}
</script>
</body>
</html>
-
- 任性不是罪
- 2016-09-06 21:07:42
我也出现了同样的问题，也是跟着老师打的，检查了好几遍代码，和老师的一样，请问你的问题解决了吗？可以分享一下答案吗？
-
- NothingY_
- 2016-08-15 22:13:04
你确定你加上了吗？你的photo_wrap这个class都没加上，也没有在外面套一层div.photo_wrap
CSS3+JS 实现超炫的散列画廊特效
46090 学习 · 215 问题
相似问题