制作旋转相册css
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了制作旋转相册css相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
body{
background: url(img/bj.jpg) no-repeat center;
background-size: 100% 100%;
}
section{
width: 280px;
height: 400px;
background: url(img/gf.gif) no-repeat center;
background-size: 50% 50%;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
transform-style: preserve-3d;
/* 动画名字、持续时间、运动类型、循环动画 */
animation: huitao 30s linear infinite;
}
section img{
display: block;
width: 280px;
height: 400px;
position: absolute;
/* 设置变形原点 */
transform-origin: center center -600px;
}
img:nth-child(1){
transform: translateZ(600px);
}
img:nth-child(2){
transform: translateZ(600px) rotateY(36deg);
}
img:nth-child(3){
transform: translateZ(600px) rotateY(72deg);
}
img:nth-child(4){
transform: translateZ(600px) rotateY(108deg);
}
img:nth-child(5){
transform: translateZ(600px) rotateY(144deg);
}
img:nth-child(6){
transform: translateZ(600px) rotateY(188deg);
}
img:nth-child(7){
transform: translateZ(600px) rotateY(216deg);
}
img:nth-child(8){
transform: translateZ(600px) rotateY(252deg);
}
img:nth-child(9){
transform: translateZ(600px) rotateY(288deg);
}
img:nth-child(10){
transform: translateZ(600px) rotateY(324deg);
}
@keyframes huitao{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
25%{
transform: rotateX(20deg) rotateY(180deg);
}
50%{
transform: rotateX(0deg) rotateY(360deg);
}
75%{
transform: rotateX(-20deg) rotateY(540deg);
}
100%{
transform: rotateX(0deg) rotateY(720deg);
}
}
</style>
</head>
<body>
<section>
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
<img src="img/9.jpg" />
<img src="img/10.jpg" />
</section>
</body>
</html>
以上是关于制作旋转相册css的主要内容，如果未能解决你的问题，请参考以下文章