上一篇加入了伪类 鼠标放上去才会开始动画,这个自动的
查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3d相册</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
}
.my-cantainer {
height: 200px;
width: 200px;
margin: 150px auto;
/*background-color: red;*/
}
.photo {
height: 100%;
width: 100%;
perspective: 1200px;
perspective-origin: -5px -300px;
}
.cantainer {
height: 200px;
width: 200px;
/*display: flex;*/
transform-style: preserve-3d;
position: relative;
animation: zhuan 5s linear infinite;
cursor: pointer;
}
@keyframes zhuan {
from {
transform: rotateX(0deg) rotateX(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateX(360deg) rotateZ(360deg);
}
}
.img {
height: 200px;
width: 200px;
/*background-color: black;*/
position: absolute;
border-radius: 20px;
}
.img1 {
transform: translateZ(100px);
background-color: red;
transition: 1s linear;
animation: rotate1 2s linear ;
}
@keyframes rotate1 {
50%{
transform: translateZ(200px);
}
100%{
transform: translateZ(100px);
}
}
.img.img2 {
transform: translateZ(-100px);
background-color: royalblue;
transition: 1s linear;
animation: rotate2 2s linear 2s;
}
@keyframes rotate2{
50%{transform: translateZ(-200px);}
100%{transform: translateZ(-100px);}
}
.img3 {
transform: rotateY(90deg) translateZ(100px);
background-color: aquamarine;
transition: 1s linear;
animation: rotate3 2s linear 4s;
}
@keyframes rotate3{
50%{
transform: rotateY(90deg) translateZ(200px);
}
100%{
transform: rotateY(90deg) translateZ(100px);
}
}
.img4 {
transform: rotateY(-90deg) translateZ(100px);
background-color: chartreuse;
transition: 1s linear;
animation: rotate4 2s linear 6s;
}
@keyframes rotate4{
50%{
transform: rotateY(-90deg) translateZ(200px);
}
100{
transform: rotateY(-90deg) translateZ(100px);
}
}
.img5 {
transform: rotateX(90deg) translateZ(100px);
background-color: darkgoldenrod;
transition: 1s linear;
animation: rotate5 2s linear 8s;
}
@keyframes rotate5{
50%{
transform: rotateX(90deg) translateZ(200px);
}
100%{
transform: rotateX(90deg) translateZ(100px);
}
}
.img6 {
transform: rotateX(-90deg) translateZ(100px);
background-color: indianred;
transition: 1s linear;
animation: rotate6 2s linear 10s;
}
@keyframes rotate6{
50%{
transform: rotateX(-90deg) translateZ(200px);
}
100%{
transform: rotateX(-90deg) translateZ(100px);
}
}
img {
height: 200px;
width: 200px;
display: inline;
}
</style>
</head>
<body>
<div class="my-cantainer">
<div class="photo">
<div class="cantainer">
<div class="img img1">
</div>
<div class="img img2">
</div>
<div class="img img3">
</div>
<div class="img img0 ">
<img src="img/WIN_20191009_16_29_02_Pro.jpg" />
</div>
<div class="img img4">
</div>
<div class="img img5">
</div>
<div class="img img6">
</div>
</div>
</div>
</div>
</body>
</html>