前端 – 使用css3制作的3D旋转相册

在某音上频繁刷到程序员制作3D旋转相册。最近有时间就自己写了一个。也算是回顾一下前端相关知识,前端初学者也可借鉴。

html代码块:

<div class="content">
<div class="picture-box">
<div class="b_wrap f"><img src="picture/01.jpg" /></div>
<div class="b_wrap t"><img src="picture/02.jpg" /></div>
<div class="b_wrap th"><img src="picture/03.jpg" /></div>
<div class="b_wrap s"><img src="picture/06.jpg" /></div>
<!---小图--->
<div class="f_wrap fo"><img src="picture/04.jpg" /></div>
<div class="f_wrap fi"><!--            <img src="picture/05.jpg">--></div>
<div class="f_wrap bf"><img src="picture/01.jpg" /></div>
<div class="f_wrap bt"><img src="picture/02.jpg" /></div>
<div class="f_wrap bth"><img src="picture/03.jpg" /></div>
<div class="f_wrap bs"><img src="picture/06.jpg" /></div>
</div>
</div>

css代码块:

*{
margin: 0px;
padding: 0px;
}
body{
background-color: black;
}
.content{
perspective: 1500px;
transform: rotateX(0deg);
margin-top: 20%;
}

.picture-box{
width: 200px;
height: 200px;
position: absolute;
left: 40%;
top: 100px;
transform-style: preserve-3d;
transform: rotateY(0deg) rotateX(-4deg);
transform-origin: 50px;
-webkit-animation:ab 10s infinite linear ;
-moz-animation:ab 10s infinite linear ;
animation:ab 10s infinite linear ;
}
.picture-box{
transform-origin:50px;
}
@keyframes ab {
0%{
transform: rotateY(0deg) ;
}
100%{
transform: rotateY(360deg) ;
}

}
.f_wrap,.b_wrap{
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 100px;
overflow: hidden;
text-align: center;
line-height: 200px;
opacity: 1;
border-radius: 10px;
}
.f_wrap{
box-shadow: 10px 10px 50px rgba(255,255,255,1);
}
.b_wrap{
width: 200px;
height: 200px;
box-shadow: 0px 0px 50px rgba(255,255,255,.3);
}
.f_wrap img,.b_wrap img{
width: 100%;
height: 100%;
}
.bf{
transform: translateZ(-50px) translateY(50px);
}
.f{
transform: translateZ(-100px) translateX(-50px);
-webkit-animation:f 10s linear 3s infinite;
-moz-animation:f 10s linear 3s infinite ;
animation:f 10s linear 3s infinite ;
}
@keyframes f {
0%{
transform: translateZ(-100px) translateX(-50px);
}
47%{
transform: translateZ(-100px) translateX(-50px);
}
50%{
transform: translateZ(-500px) translateX(-50px);
}
97%{
transform: translateZ(-500px) translateX(-50px);
}
100%{
transform: translateZ(-100px) translateX(-50px);
}

}
.bt{
transform: rotateY(90deg) translateZ(50px) translateY(50px);
}
.t{
transform: rotateY(90deg) translateZ(50px) ;
-webkit-animation:t 10s linear 3s infinite;
-moz-animation:t 10s linear 3s infinite ;
animation:t 10s linear 3s infinite ;
}
@keyframes t {
0%{
transform: rotateY(90deg) translateZ(50px);
}
47%{
transform: rotateY(90deg) translateZ(50px);
}
50%{
transform: rotateY(90deg) translateZ(450px) ;
}
97%{
transform: rotateY(90deg) translateZ(450px) ;
}
100%{
transform: rotateY(90deg) translateZ(50px);
}

}
.bth{
transform: rotateX(0deg) translateZ(50px) translateY(50px);
}
.th{
/*background: blue;*/
transform: rotateX(0deg) translateZ(100px) translateX(-50px);
-webkit-animation:th 10s infinite 3s linear ;
-moz-animation:th 10s infinite 3s linear ;
animation:th 10s infinite 3s linear ;
}
@keyframes th {
0%{
transform: translateZ(100px) translateX(-50px);
}
47%{
transform: translateZ(100px) translateX(-50px);
}
50%{
transform: translateZ(500px) translateX(-50px);
}
97%{
transform: translateZ(500px) translateX(-50px);
}
100%{
transform: translateZ(100px) translateX(-50px);
}
}
.fo{
background: blueviolet;
transform: rotateX(90deg) translateZ(0px);
}
.fi{
background: #1C1C1C;
transform: rotateX(90deg) translateZ(-50px);
-webkit-animation:fi 10s infinite 3s linear ;
-moz-animation:fi 10s infinite 3s linear ;
animation:fi 10s infinite 3s linear ;
}
@keyframes fi {
0%{
transform:rotateX(90deg) translateZ(-50px) ;
}
47%{
transform:rotateX(90deg) translateZ(-50px);
}
50%{
transform:rotateX(90deg) translateZ(-120px);
}
97%{
transform:rotateX(90deg) translateZ(-120px);
}
100%{
transform:rotateX(90deg) translateZ(-50px);
}

}
.bs{
transform: rotateY(90deg) translateZ(-50px) translateY(50px);
}
.s{

/*background: darkgoldenrod;*/
transform: rotateY(90deg) translateZ(-150px);
-webkit-animation:s 10s infinite 3s linear ;
-moz-animation:s 10s infinite 3s linear ;
animation:s 10s infinite 3s linear ;
}

@keyframes s {
0%{
transform:rotateY(90deg) translateZ(-150px) ;
}
47%{
transform:rotateY(90deg) translateZ(-150px);
}
50%{
transform:rotateY(90deg) translateZ(-550px) ;
}
97%{
transform:rotateY(90deg) translateZ(-550px) ;
}
100%{
transform:rotateY(90deg) translateZ(-150px) ;
}
}

@keyframes创建的动画是很强大的,很多炫酷的动画也可以实现,有简单的游戏场景、加载loding、以及部分交互效果等。@keyframes以及过渡动画属于css3.0所以注意浏览器兼容性。多用于手机移动端。


非著名均为来自网络,不代表一点新作立场,若为著名原创,转载请注明出处:https://ydxinzuo.cn/archives/1608

作者: xinyuan7630

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 303817524@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部