<div class="stage-area">
<div class="container">
<a href="#"><img src="1.jpeg" />a>
<a href="#"><img src="2.jpeg" />a>
<a href="#"><img src="3.jpeg" />a>
<a href="#"><img src="4.jpeg" />a>
<a href="#"><img src="5.jpeg" />a>
<a href="#"><img src="6.jpeg" />a>
<a href="#"><img src="7.jpeg" />a>
<a href="#"><img src="8.jpeg" />a>
<a href="#"><img src="9.jpeg" />a>
div>
div>
.stage-area {
perspective: 800px;
}
.container {
transform-style: preserve-3d;
width: 160px;
}
img {
max-width: 100%;
}
.container {
...
position: absolute;
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -80px;
}
img {
...
position: absolute;
}
html, body {
height: 100%;
}
.stage-area {
...
min-height: 100%;
}
.container a:nth-child(1) img {
transform: rotateY(0deg);
}
.container a:nth-child(2) img {
transform: rotateY(40deg);
}
.container a:nth-child(3) img {
transform: rotateY(80deg);
}
.container a:nth-child(4) img {
transform: rotateY(120deg);
}
.container a:nth-child(5) img {
transform: rotateY(160deg);
}
.container a:nth-child(6) img {
transform: rotateY(200deg);
}
.container a:nth-child(7) img {
transform: rotateY(240deg);
}
.container a:nth-child(8) img {
transform: rotateY(280deg);
}
.container a:nth-child(9) img {
transform: rotateY(320deg);
}
.container a:nth-child(1) img {
transform: rotateY(0deg) translateZ(250px);
}
.container a:nth-child(2) img {
transform: rotateY(40deg) translateZ(250px);
}
...
- 好了,一个3D立体的旋转相册出现了,如果感觉图片有点太高,有种仰视的感觉,可以设置perspective-origin,让透视点高一点,产生俯瞰的效果。
.stage-area {
...
perspective-origin: center 30%;
}
属性 | 描述 |
---|---|
@keyframes | 定义关键帧 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | @keyframes 定义的动画名称。 |
animation-duration | 设置完成动画所花费的时间。默认值是 0,意味着没有动画效果。 |
animation-timing-function | 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。能够在该函数中使用自己的值。 |
animation-delay | 设置动画开始前等待的时间,以秒或毫秒计。默认值是 0。 |
animation-iteration-count | 设置动画被播放的次数。 |
animation-direction | 设置动画是否在下一周期逆向地播放,单数次正向,偶数次逆向。 |
animation-fill-mode | 设置动画在播放之前或之后,其动画效果是否可见。 |
animation-play-state | 设置动画正在运行或暂停。 |
@keyframes rotating {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.container {
...
/*animation: rotating 10s linear 3s infinite alternate forwards;*/
animation-name: rotating;
animation-duration: 10s;
animation-timing-function: linear;
/*animation-delay: 3s;*/
animation-iteration-count: infinite;
/*animation-direction: alternate;*/
/*animation-fill-mode: forwards;*/
}
.container:hover {
animation-play-state: paused;
}
.container img {
border: 3px solid rgba(255, 255, 255, .5);
}
<img id="t2" src="2.jpeg" />
<img id="t3" src="3.jpeg" />
<img id="t4" src="4.jpeg" />
<img id="t5" src="5.jpeg" />
<img id="t6" src="6.jpeg" />
<img id="t7" src="7.jpeg" />
<img id="t8" src="8.jpeg" />
<img id="t9" src="9.jpeg" />
<img id="t1" src="1.jpeg" />
<div class="stage-area">
<div class="container">
<a href="#t1"><img src="1.jpeg" />a>
<a href="#t2"><img src="2.jpeg" />a>
<a href="#t3"><img src="3.jpeg" />a>
<a href="#t4"><img src="4.jpeg" />a>
<a href="#t5"><img src="5.jpeg" />a>
<a href="#t6"><img src="6.jpeg" />a>
<a href="#t7"><img src="7.jpeg" />a>
<a href="#t8"><img src="8.jpeg" />a>
<a href="#t9"><img src="9.jpeg" />a>
div>
div>
body > img:not(:target) {
z-index: -1;
}
.container {
...
z-index: 3;
}
body > img:not(:target) {
z-index: 1;
}
body > img:target {
z-index: 2;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册title>
<style>
@keyframes rotating {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
html, body {
height: 100%;
margin: 0;
}
.stage-area {
perspective: 800px;
min-height: 100%;
perspective-origin: center 30%;
}
.container {
transform-style: preserve-3d;
width: 160px;
position: absolute;
/*z-index: 3;*/
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -80px;
/*animation: rotating 10s linear 3s infinite alternate forwards;*/
animation-name: rotating;
animation-duration: 10s;
animation-timing-function: linear;
/*animation-delay: 3s;*/
animation-iteration-count: infinite;
/*animation-direction: alternate;*/
/*animation-fill-mode: forwards;*/
}
.container:hover {
animation-play-state: paused;
}
.container img {
border: 3px solid rgba(255, 255, 255, .5);
}
img {
max-width: 100%;
position: absolute;
}
.container a:nth-child(1) img {
transform: rotateY(0deg) translateZ(250px);
}
.container a:nth-child(2) img {
transform: rotateY(40deg) translateZ(250px);
}
.container a:nth-child(3) img {
transform: rotateY(80deg) translateZ(250px);
}
.container a:nth-child(4) img {
transform: rotateY(120deg) translateZ(250px);
}
.container a:nth-child(5) img {
transform: rotateY(160deg) translateZ(250px);
}
.container a:nth-child(6) img {
transform: rotateY(200deg) translateZ(250px);
}
.container a:nth-child(7) img {
transform: rotateY(240deg) translateZ(250px);
}
.container a:nth-child(8) img {
transform: rotateY(280deg) translateZ(250px);
}
.container a:nth-child(9) img {
transform: rotateY(320deg) translateZ(250px);
}
body > img:not(:target) {
z-index: -1;
}
/*body > img:not(:target) {
z-index: 1;
}
body > img:target {
z-index: 2;
}*/
style>
head>
<body>
<img id="t2" src="2.jpeg" />
<img id="t3" src="3.jpeg" />
<img id="t4" src="4.jpeg" />
<img id="t5" src="5.jpeg" />
<img id="t6" src="6.jpeg" />
<img id="t7" src="7.jpeg" />
<img id="t8" src="8.jpeg" />
<img id="t9" src="9.jpeg" />
<img id="t1" src="1.jpeg" />
<div class="stage-area">
<div class="container">
<a href="#t1"><img src="1.jpeg" />a>
<a href="#t2"><img src="2.jpeg" />a>
<a href="#t3"><img src="3.jpeg" />a>
<a href="#t4"><img src="4.jpeg" />a>
<a href="#t5"><img src="5.jpeg" />a>
<a href="#t6"><img src="6.jpeg" />a>
<a href="#t7"><img src="7.jpeg" />a>
<a href="#t8"><img src="8.jpeg" />a>
<a href="#t9"><img src="9.jpeg" />a>
div>
div>
body>
html>
参考资料:
1、十天精通CSS3
https://www.imooc.com/code/1882
2、深入理解CSS中的层叠上下文和层叠顺序
https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
3、理解 CSS z-index
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
4、CSS3 动画属性(Animation)
http://www.w3school.com.cn/cssref/index.asp#animation