旋转相册
用html打一个简易的旋转相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d旋转相册</title>
<style>
body{
margin: 0; /*外边距*/
perspective: 1000px; /* 设置元素被查看位置的视图*/
overflow: hidden;
}
.images{
position: relative;
width: 260px;
height: 260px;
/*border: 2px solid red;*/
margin: 260px auto;
transform-style: preserve-3d;
animation: move 4s infinite/*无限*/ linear/*匀速*/;
transform-origin: center center 130px;
}
p{
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 260px;
border: 1px dashed black;
margin: 0;
transition: 1s; /*过度时间*/
}
.li6{
transform: rotateX(-90deg); /*旋转属性*/
transform-origin: bottom; /*相对于下面旋转*/
}
.li5{
transform: rotateY(-90deg);
transform-origin: left;
}
.li4{
transform: rotateY(90deg);
transform-origin: right;
}
.li3{
transform: rotateX(90deg);
transform-origin: top;
}
.li2{
transform: translateZ(260px);
}
.li1{
transform: rotateY(180deg);
}
@keyframes move {
0% {transform: rotateY(0deg)}
100%{transform: rotateY(360deg)}
}
.images:hover .li6{
transform: rotateX(-90deg) translateZ(150px);
/*transform-origin: bottom;*/
}
.images:hover .li5{
transform: rotateY(-90deg) translateZ(150px);
}
.images:hover .li4{
transform: rotateY(90deg) translateZ(150px);
}
.images:hover .li3{
transform: rotateX(90deg) translateZ(150px);
}
.images:hover .li2{
transform: translateZ(260px) translateZ(150px);
}
.images:hover .li1{
transform: rotateY(180deg) translateZ(150px);
}
</style>
</head>
<body>
<div class="images">
<p class="li1"><img src="01.jpg" alt="" width="260" height="260"></p>
<p class="li2"><img src="02.jpg" alt="" width="260" height="260"></p>
<p class="li3"><img src="03.jpg" alt="" width="260" height="260"></p>
<p class="li4"><img src="04.jpg" alt="" width="260" height="260"></p>
<p class="li5"><img src="05.jpg" alt="" width="260" height="260"></p>
<p class="li6"><img src="06.jpg" alt="" width="260" height="260" ></p>
</div>
</body>
</html>
运行图片
新手小白,多多指教。