<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册</title>
<style type="text/css">
body,
div,
p,
ul,
ol,
li,
dl,
dt,
dd,
table,
tr,
td,
form,
hr,
fieldset,
h1,
h2,
h3,
h4,
h5,
h6,
img,
input {
margin: 0;
padding: 0;
}
html,
body {
background: black;
width: 100%;
height: 100%;
}
.bg_box {
position: absolute;
width: 100%;
height: 100%;
}
.bg_box img {
position: absolute;
width: 100%;
height: 100%;
}
.content {
width: 200px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 */
perspective: 1500px;
/* perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
注释:perspective 属性只影响 3D 转换元素。
提示:请与 perspective-origin 属性一同使用该属性,这样您就能够改变 3D 元素的底部位置。 */
}
.box {
width: 200px;
height: 150px;
/* perspective-origin: ( 50% 50%); */
transform-style: preserve-3d;
/* transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释:该属性必须与 transform 属性一同使用。 */
transform: rotateX(-30deg);
animation: photo 15s linear infinite;
/* 动画,animation 属性是一个简写属性,用于设置六个动画属性: */
/* animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。 */
}
.box:hover {
animation: photo 15s linear infinite paused;
}
.box img {
width: 200px;
height: 150px;
position: absolute;
left: 0;
top: 0;
/* 去掉定位,呈DNA螺旋状旋转 */
border: 3px solid rgba(255, 255, 255, .5);
/* transform-style: preserve-3d; */
transition: all 1s;
}
.box a:nth-child(1) img {
transform: translateZ(280px);
}
.box a:nth-child(2) img {
transform: rotateY(40deg) translateZ(280px);
}
.box a:nth-child(3) img {
transform: rotateY(80deg) translateZ(280px);
}
.box a:nth-child(4) img {
transform: rotateY(120deg) translateZ(280px);
}
.box a:nth-child(5) img {
transform: rotateY(160deg) translateZ(280px);
}
.box a:nth-child(6) img {
transform: rotateY(200deg) translateZ(280px);
}
.box a:nth-child(7) img {
transform: rotateY(240deg) translateZ(280px);
}
.box a:nth-child(8) img {
transform: rotateY(280deg) translateZ(280px);
}
.box a:nth-child(9) img {
transform: rotateY(320deg) translateZ(280px);
}
.box a:nth-child(1) img:hover {
transform: translateZ(280px) scale(1.2);
}
.box a:nth-child(2) img:hover {
transform: rotateY(40deg) translateZ(280px) scale(1.2);
}
.box a:nth-child(3) img:hover {
transform: rotateY(80deg) translateZ(280px) scale(1.2);
}
.box a:nth-child(4) img:hover {
transform: rotateY(120deg) translateZ(280px) scale(1.2);
}
.box a:nth-child(5) img:hover {
transform: rotateY(160deg) translateZ(280px) scale(1.2);
}
.box a:nth-child(6) img:hover {
transform: rotateY(200deg) translateZ(280px) scale(1.2);
}
.box a:nth-child(7) img:hover {
transform: rotateY(240deg) translateZ(280px) scale(1.2);
}
.box a:nth-child(8) img:hover {
transform: rotateY(280deg) translateZ(280px) scale(1.2);
}
.box a:nth-child(9) img:hover {
transform: rotateY(320deg) translateZ(280px) scale(1.2);
}
body>.bg_box>:not(:target) {
z-index: -4;
}
/* 让不是目标元素的层级设为-4,隐藏在底部 */
@keyframes photo {
0% {
transform: rotateX(-10deg) rotateY(0deg);
/* 控制初始位置 */
}
100% {
transform: rotateX(-10deg) rotateY(360deg);
/* 控制结束位置 */
}
}
</style>
</head>
<body>
<div class="bg_box">
<img id="t1" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537970523&di=926d3ce43eb0146b036b1ca671a03221&src=http://img5q.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.jpeg"
/>
<img id="t2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607796&di=b1e6406dd72dd25f1fc156d1936dff66&imgtype=0&src=http%3A%2F%2Fimgq.duitang.com%2Fuploads%2Fitem%2F201406%2F14%2F20140614141219_NUSwP.thumb.700_0.jpeg"
/>
<img id="t3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607790&di=9ca0ab1b5252371ca7d5e655c713e16a&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201409%2F12%2F20140912133849_sB83y.thumb.700_0.jpeg"
/>
<img id="t4" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607789&di=e825ca6638d49aeac95693ca53982480&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4034970a304e251fcb4882b9a186c9177f3e5337.jpg"
/>
<img id="t5" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607782&di=eb9e2ddca46e441dc34e09f52f520659&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201505%2F10%2F20150510184422_sTNUF.jpeg"
/>
<img id="t6" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607782&di=b7cea16fba8bcb84a9c38307c8c761a7&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F8d5494eef01f3a293a7c99719f25bc315d607cdc.jpg"
/>
<img id="t7" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
/>
<img id="t8" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
/>
<img id="t9" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
/>
</div>
<div class="content">
<div class="box">
<a href="#t1">
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537970523&di=926d3ce43eb0146b036b1ca671a03221&src=http://img5q.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.jpeg"
alt="" />
</a>
<a href="#t2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607796&di=b1e6406dd72dd25f1fc156d1936dff66&imgtype=0&src=http%3A%2F%2Fimgq.duitang.com%2Fuploads%2Fitem%2F201406%2F14%2F20140614141219_NUSwP.thumb.700_0.jpeg"
alt="" />
</a>
<a href="#t3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607790&di=9ca0ab1b5252371ca7d5e655c713e16a&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201409%2F12%2F20140912133849_sB83y.thumb.700_0.jpeg"
alt="" />
</a>
<a href="#t4">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607789&di=e825ca6638d49aeac95693ca53982480&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4034970a304e251fcb4882b9a186c9177f3e5337.jpg"
alt="" />
</a>
<a href="#t5">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607782&di=eb9e2ddca46e441dc34e09f52f520659&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201505%2F10%2F20150510184422_sTNUF.jpeg"
alt="" />
</a>
<a href="#t6">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607782&di=b7cea16fba8bcb84a9c38307c8c761a7&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F8d5494eef01f3a293a7c99719f25bc315d607cdc.jpg"
alt="" />
</a>
<a href="#t7">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
alt="" />
</a>
<a href="#t8">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
alt="" />
</a>
<a href="#t9">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
alt="" />
</a>
</div>
</div>
</body>
效果图: