为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/CSS3+JS 实现超炫的散列画廊特效

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

为什么我的加了翻转之后，没有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>


行走的指尖

2016-08-15

源自：CSS3+JS 实现超炫的散列画廊特效  2-3

关注问题 我要回答
1671
操作
收起

正在回答

4 回答

追觅梦初的国度
2016-09-29 
.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效果，只是背对我们看 不见而已。自己多看看基础了！！！

0 回复 有任何疑惑可以回复我~
收起回答
行走的指尖 提问者
2016-09-07

那个应该无所谓，我没有改过来，但是后面完成的样式是没问题的，下面是中间版本，给你个参考：

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


0 回复 有任何疑惑可以回复我~
收起回答
任性不是罪
2016-09-06

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


0 回复 有任何疑惑可以回复我~
收起回答
NothingY_
2016-08-15

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

0 回复 有任何疑惑可以回复我~
收起回答
#1

行走的指尖 提问者

嗯，是加了的，可是不知道为什么复制过来就没了。不过谢谢你，继续找问题中
2016-08-16 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
CSS3+JS 实现超炫的散列画廊特效
  • 参与学习       46090    人
  • 解答问题       215    个

实现更自由的切换照片的画廊效果，打造超酷的切换动画

进入课程

本课相似问答

2 回答没有3d翻转效果

3 回答有没有人发现图片翻转的时候没有3D效果了。。。

3 回答在Mozilla Firefox中把-webkit 改成了 -moz后怎么还是没有3D的旋转效果，只是类似于切换效果

2 回答为什么没有效果

1 回答为什么没有效果呢？
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信