html表⽩代码照⽚墙代码，前端特效之520表⽩神器-旋转照⽚墙520马上到了，教⼤家⼀⼿表⽩神器，单⾝的程序员们感觉学起来，很简单。
制作步骤：
1. 新建代码⽬录，新建⽂件index.html，将以下代码拷贝到⽂件中
2. 新建⽂件夹image，12张图⽚放进去，修改imgae标签对应的src属性，酷炫的照⽚旋转就完成了。
3. 代码效果如下，双击index.html或者直接拖到浏览器中打开即可
520表⽩神器-照⽚特效
*{
padding:0;
margin:0;
}
#react{
width: 200px;
height:200px;
margin: 200px auto;
transform-style:preserve-3d;
animation:rotate 20s infinite;
animation-timing-function: linear;
}
#react div{
position:absolute;
transition: all .4s;
}
div .out_pic{
width:200px;
height:200px;
html代码转链接opacity:0.9;
}
div .in_pic{
width:100px;
height:100px;
}
#react span{
display:block;
position:absolute;
width:100px;
height:100px;
top:50px;
left:50px;
}
@keyframes rotate{
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:hover .out_frount{
transform:translateZ(200px);
}
#react:hover .out_back{
transform:translateZ(-200px);
}
#react:hover .out_left{
transform:rotateY(90deg) translateZ(200px); }
#react:hover .out_right{
transform: rotateY(-90deg) translateZ(200px); }
#react:hover .out_top{
transform:rotateX(90deg) translateZ(200px); }
#react:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px); }
@charset "utf-8";
/* CSS Document */
摆脱单⾝就差这⼀步了，赶紧学起来，记得回来关注哦！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。