首页 > WEB前端 > 正文

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

Webmaster · 浏览 392 · 点赞 0 · 评论 0 · 3年前 (2020-04-25)

在某音上频繁刷到程序员制作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所以注意浏览器兼容性。多用于手机移动端。


下载地址：

文件名称：3D旋转相册

文件大小：6.3M适用版本：

更新日期：2020-04-24作者信息：

点击下载

本文章未特殊注明的版权信息归本站所有，著名来源归原作者所有！

猜你喜欢

微信小程序反编译出现错误SyntaxError：Unexpected end of input

uni-app启动出现闪动、登录页再现以及页面切换闪动问题解决

前端 – 简单封装canvas绘制渐变圆圈

发表评论

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

评论信息