CSS3+JS 实现超炫的散列画廊特效_技术问答

慕前端1243435

点击没有翻转

图片界面样式，

.photo-front .photo-wrap .side-front{

-webkit-transform: rotateY(360deg);

}

.photo-front .photo-wrap .side-back{

-webkit-transform: rotateY(180deg);

}

描述界面样式

.photo-back .photo-wrap .side-front{

-webkit-transform: rotateY(180deg);

}

.photo-back .photo-wrap .side-back{

-webkit-transform: rotateY(0deg);

}

通过点击含有photo这个类的标签动态来回添加.photo-front和.photo-back

jq代码

$(".photo").click(function(){

if($(this).hasClass("photo-front")==true){

$(this).removeClass("photo-front");

$(this).addClass("photo-back");

}else{

$(this).addClass("photo-front");

$(this).removeClass("photo-back");

}

})

2018-12-30 1回答·1118浏览

zoomdong

好奇怪啊?为啥我翻转之后,就直接变成了一块黑

肯定一片黑，

.photo_front .photo-wrap{

transform: rotateY(0deg);

}

.photo_back .photo-wrap{

transform: rotateY(180deg);

}

理解一下

</div>

现在是需要把photo-wrap下的div1和div2进行翻转，简单理解就是翻过去div1之后把div2展示出来。翻过去div2之后把div1展示出来。

你直接把photo-wrap翻转过去肯定什么都没有，就是一片黑。

你把手机放桌子上，翻过去手机是背面，再翻过来是正面。你要是把桌子翻过去还能看到手机吗？

.photo_front .photo-wrap .div1{//正面在上时 div1的样式

transform: rotateY(0deg);

}

.photo_front .photo-wrap .div2{//正面在上时 div2的样式

transform: rotateY(180deg);

}

.photo_back .photo-wrap .div1{//反面在上时 div1的样式

transform: rotateY(180deg);

}

.photo_back .photo-wrap .div2{//反面在上时 div2的样式

transform: rotateY(360deg);

}

2018-08-14 2回答·1203浏览

慕的地5303714

为什么加phoneWrap 直接加在photo 上不行吗: 两者动画同时进行，导致不出现动画; 2018-01-10 1回答·705浏览

微风灬唐唐

有关transform:rotateY(180deg)的问题: 已采纳 DGua 的回答; 刚才又试了一下其他浏览器，发现如果用IE浏览器的话，效果和老师视频里的效果是一样的。side-back会以翻转了180度的姿态覆盖在side-front上。但是在chrome下就是我们遇到问题的样子。背后的机制是什么我讲不出来，但是可以肯定你我的代码没问题，是浏览器内核渲染时候的差别问题。; 2017-12-12 3回答·4217浏览

java转前端

.photo-wrap .side-front在html中哪里用到了: 已采纳 qq_水士口_0 的回答; 点击的时候从背面旋转回正面; 2017-11-08 1回答·1526浏览

Freen247

我怎么没有三D效果啊反转比如哦100度没有一边长一边短的立体效果: -webkit-perspective: 800px; 值越小，你要的效果立体越强越大，根据自己的图片大小感觉会越真实，具体情况自己看这写; 2017-03-27 3回答·1505浏览

Freen247

我需要在 photo_center 中另外设置back font 而不是自动生成的这样对吗好像老师没有设置就有反转的i效果了: <div class="photo photo_center photo_back"> 老师改的是photo_back和photo_front的切换，给事件的时候切换这两个class就可以了; 2017-03-27 1回答·989浏览

Freen247

为什么我的没有翻转？: 已采纳自由的气息的回答; 在学习。; 2017-03-27 1回答·1488浏览

cutecat1234567890_

请教一下各位大神老师，照着写的代码，但是显示的和视频里面的不一样啊

<!DOCTYPE html>

<html>

<head>

<title>css3+js实现散列画廊特效</title>

<style>

*{

padding: 0;

margin: 0;

}

body{

background-color: #fff;

color: #555;

font-family: "Avenir Next", "Lantinghei SC";

font-size: 14px;

-webkit-font-smoothing: antialiased;

-moz-font-smoothing: antialiased;

}

.wrap{

width: 100%;

height: 600px;

position: absolute;

top: 50%;

margin-top: -300px;

background-color: #333;

overflow: hidden;

-webkit-perspective: 800px;

-moz-perspective: 800px;

}

/*海报样式*/

.photo{

width: 260px;

height: 320px;

position: absolute;

z-index: 1;

box-shadow: 0 0 1px rgba(0,0,0,.01);

-webkit-transition: all .6s;

}

.photo .side{

width: 100%;

height: 100%;

background-color: #eee;

position: absolute;

top: 0;

right: 0;

padding: 20px;

box-sizing: border-box;

}

.photo .side-front{}

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

}

.photo .side-back{}

.photo .side-back .desc{

color: #666;

font-size: 14px;

line-height: 1.5em;

}

/*当前选中的海报样式*/

.photo_center{

left: 50%;

right: 50%;

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-wrap .side{

-webkit-backface-visibility: hidden;

}

.photo_front .photo-wrap{

-webkit-transform: rotateY(0deg);

}

.photo_back .photo-wrap{

-webkit-transform: rotateY(180deg);

}

/* 控制按钮的样式 */

.nav{

width: 80%;

height: 30px;

line-height: 30px;

position: absolute;

left: 10%;

bottom: 20px;

z-index: 999;

background-color: #fff;

text-align: center;

}

/*控制按钮的样式*/

@font-face{

font-family: 'icons';

src: url('turn-arrow.woff') format('woff');

font-weight: normal;

font-size: normal;

}

/*普通样式*/

.nav .i{

width: 30px;

height: 30px;

display: inline-block;

cursor: pointer;

background-color: #aaa;

text-align: center;

border-radius: 50%;

-webkit-transform: scale(.48);

-webkit-transition: all .5s;

}

.nav .i:after{

content: "\e600";

font-family: 'icons';

font-size: 80%;

display: inline-block;

line-height: 30px;

text-align: center;

color: #fff;

opacity: 0;

}

/*选中样式*/

.nav .i_current{

-webkit-transform: scale(1);

}

.nav .i_current:after{

opacity: 1;

}

/*背面样式*/

.nav .i_back{

-webkit-transform: rotateY(-180deg);

background-color: #555;

}

/* 优化样式 */

.photo{

left: 50%;

top: 50%;

margin: -160px 0 0 -130px;

}

.photo-wrap{

-webkit-transform-origin: 0% 50%;

}

.photo_front .photo-wrap{

-webkit-transform: translate(0px, 0px) rotateY(0deg);

}

.photo_back .photo-wrap{

-webkit-transform: translate(260px, 0px) rotateY(180deg);

}

</style>

</head>

</div>

<p class="desc">描述的文字</p>

</div>

</body>

</html>

2017-03-19 3回答·1290浏览

qq_琉樱_0

谁能帮忙解决下这个问题了：只显示正面: 你这也没有实现翻转之后显示描述信息啊！！！; 2017-02-24 2回答·926浏览

qq_饿了三天_04237311

旋转效果方向？: 0度旋转到180 再从180转到0度当然是往回转要方向一致只能转到360 不过360转到180 还是往回转; 2016-12-24 1回答·764浏览

成长前端初学者

perspective值的设置依据什么？: px, 定义是screen到设置的距离差; 2016-11-30 1回答·1183浏览

慕的地1924465

怎么把.photo_front加到.photo中的。

var _photo=g('.photo');

_photo[s].className+= ' photo_front'

2016-10-27 1回答·292浏览

慕前端8664132

为什么要把负责平移旋转和负责翻转的div容器分两个啊: 老师这里photo-wrap的功能是将两张图片（正面和反面）封装成一个具有正反两面的图片（只是具有正反两面，并不具有翻转功能），然后后来在photo里面（即负责平移和旋转）又加了2个样式，photo_front和photo_back，这2个样式的功能就是去让wrap（刚刚封装好的具有正反两面的图片）具有翻转效果，所以需要样式分开写; 2016-09-04 2回答·1268浏览

行走的指尖

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

.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-08-15 4回答·1797浏览

dreamyi

为什么显示有问题呢0 0？？: 你没有把photo-wrap类加到html中; 2016-07-29 1回答·1392浏览

慕丝4089432

听好几遍，还是不会弄不出来，哎，啥玩意: https://github.com/nzbin/imooc-ScatteredPolaroidsGallery源代码; 2016-07-25 1回答·900浏览

effort期待

turn is not defined: 你是不是忘记在<div class="photo photo_center photo_front" onclick="turn(this)" id="photo_{{index}}">中忘记加 onclick="turn(this)"了，或者js中你没用turn()这个函数名; 2016-07-21 1回答·991浏览

weibo_便是有情当落日_0

点击背面翻转之后就看见黑背景了，没有显示正面，怎么回事啊: 没有真确设置背面的CSS样式吧还是布局问题; 2016-06-18 1回答·803浏览

weibo_便是有情当落日_0

求解为什么正面看不到

没设置

.photo .side-front{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

这个属性或是这个类，多仔细检查一下

2016-06-18 2回答·763浏览