qq照片墙图片

html表⽩代码照⽚墙代码,前端特效之520表⽩神器-旋转照⽚墙

520马上到了，教⼤家⼀⼿表⽩神器，单⾝的程序员们感觉学起来，很简单。

制作步骤：

1.新建代码⽬录，新建⽂件，将以下代码拷贝到⽂件中

2.新建⽂件夹image，找12张图⽚放进去，修改imgae标签对应的src属性，酷炫的照⽚旋转就完成了。

3.代码效果如下，双击或者直接拖到浏览器中打开即可

520表⽩神器-照⽚特效

*{

padding:0;

margin:0;

}

#react{

width:200px;

height:200px;

margin:200pxauto;

transform-style:prerve-3d;

animation:rotate20sinfinite;

animation-timing-function:linear;

}

#reactdiv{

position:absolute;

transition:all.4s;

}

_pic{

width:200px;

height:200px;

opacity:0.9;

}

_pic{

width:100px;

height:100px;

}

#reactspan{

display:block;

position:absolute;

width:100px;

height:100px;

top:50px;

left:50px;

}

@keyframesrotate{

from{transform:rotateX(0deg)rotateY(0deg);}

to{transform:rotateX(360deg)rotateY(360deg);}

}

.out_frount{

transform:translateZ(100px);

}

.out_back{

transform:translateZ(-100px);

}

.out_left{

transform:rotateY(90deg)translateZ(100px);

}

.out_right{

transform:rotateY(-90deg)translateZ(100px);

}

.out_top{

transform:rotateX(90deg)translateZ(100px);

}

.out_bottom{

transform:rotateX(-90deg)translateZ(100px);

}

.in_frount{

transform:translateZ(50px);

}

.in_back{

transform:translateZ(-50px);

}

.in_left{

transform:rotateY(90deg)translateZ(50px);

}

.in_right{

transform:rotateY(-90deg)translateZ(50px);

}

.in_top{

transform:rotateX(90deg)translateZ(50px);

}

.in_bottom{

transform:rotateX(-90deg)translateZ(50px);

}

#react:_frount{

transform:translateZ(200px);

}

#react:_back{

transform:translateZ(-200px);

}

#react:_left{

transform:rotateY(90deg)translateZ(200px);

}

#react:_right{

transform:rotateY(-90deg)translateZ(200px);

}

#react:_top{

transform:rotateX(90deg)translateZ(200px);

}

#react:_bottom{

transform:rotateX(-90deg)translateZ(200px);

}

@chart"utf-8";

/*CSSDocument*/

摆脱单⾝就差这⼀步了，赶紧学起来，记得回来关注哦！