设置3d效果时，并没有side_back在上，而是side

源自：2-3 3D效果编写

设置3d效果时，并没有side_back在上，而是side_front在上面先显示，为什么

为什么我的加了翻转之后，没有side_back在上面，而是side_front在上面

源代码如下：

<!DOCTYPE html>

<html>

<head>

<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>

<div>

<p>标题标题标题</p>

</div>

</div>

</body>

</html>

提问者：行走的指尖 2016-08-15 16:18

个回答

追觅梦初的国度: 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">

<div id="wrap">

<div class="photo photo_front" onclick="turn(this)" id="photo_{{index}}">

<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>

0
任性不是罪

2016-09-06 21:07:42

我也出现了同样的问题，也是跟着老师打的，检查了好几遍代码，和老师的一样，请问你的问题解决了吗？可以分享一下答案吗？

0
NothingY_

2016-08-15 22:13:04

你确定你加上了吗？你的photo_wrap这个class都没加上，也没有在外面套一层div.photo_wrap

0