<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
img{
width:200px;
height: 300px;
}
body{ background-color: #313131; }
@keyframes fn{
0% {transform:rotateX(-15deg) rotateY(0deg);}
100%{transform:rotateX(-15deg) rotateY(360deg);}
}
@-moz-keyframes fn{
0% {transform:rotateX(-15deg) rotateY(0deg);}
100%{transform:rotateX(-15deg) rotateY(360deg);}
}
@-ms-keyframes fn{
0% {transform:rotateX(-15deg) rotateY(0deg);}
100%{transform:rotateX(-15deg) rotateY(360deg);}
}
@-webkit-keyframes fn{
0% {transform:rotateX(-15deg) rotateY(0deg);}
100%{transform:rotateX(-15deg) rotateY(360deg);}
}
.box{
width:200px;
height:300px;
position:relative;
margin:auto;
margin-top:150px;
transform-style:preserve-3d;
transform:rotateX(-10deg);
animation: fn 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative
}
.box:hover{
animation-play-state: paused;
}
.box>div{
width:200px;
height:300px;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div class="box">
<div style="transform: rotateY(0deg) translateZ(275px);">
<img src="img/1.jpg" >
</div>
<div style="transform: rotateY(40deg) translateZ(275px);">
<img src="img/2.jpg">
</div>
<div style="transform: rotateY(80deg) translateZ(275px);">
<img src="img/3.jpg">
</div>
<div style="transform: rotateY(120deg) translateZ(275px);">
<img src="img/4.jpg">
</div>
<div style="transform: rotateY(160deg) translateZ(275px);">
<img src="img/5.jpg">
</div>
<div style="transform: rotateY(200deg) translateZ(275px);">
<img src="img/6.jpg">
</div>
<div style="transform: rotateY(240deg) translateZ(275px);">
<img src="img/7.jpg">
</div>
<div style="transform: rotateY(280deg) translateZ(275px);">
<img src="img/8.jpg">
</div>
<div style="transform: rotateY(320deg) translateZ(275px);">
<img src="img/9.jpg" >
</div>
</div>
</body>
</html>
js自转旋转木马相册,情人节浪漫定制,程序员的专属表白源代码
版权申诉
8 浏览量
2023-02-18
23:16:11
上传
评论
收藏 814B ZIP 举报
振华OPPO
- 粉丝: 26w+
- 资源: 532
最新资源
- 基于51单片机的自动浇花设计论文
- 客服机器人需要的数据集,包括order、ware、user,测试集和开发集
- 用0到9生成十位数的所有排列组合(java代码).docx
- 模仿魔慢相机的人脸监测选择ios组件
- STM32F103C8T6模拟IIC控制4针0.96寸OLED显示屏已测
- Chromeextent_paly.zip
- 【2023年全国职业技能大赛“信息安全与评估”赛项】任务4-Linux内存取证WP+靶场环境
- 基于51单片机数字电压表的设计(PCB+原理图+仿真+论文+代码)
- open62541在window10 VS2019编译完成的源码
- 新闻文章自动新闻采集系统-webapps.rar
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈