前端实现3D旋转木马相册，自动旋转鼠标移入停止转动，移出继续转动
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>3D旋转木马相册</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 弹性布局 让页面元素水平+垂直居中*/
display: flex;
justify-content: center;
align-items: center;
/*让页面始终占浏览器总高*/
height: 100vh;
background-color: #000;
/* 视距 让元素看起来更有3D效果*/
perspective: 900px;
}
section{
/*相对定位*/
position: relative;
width: 300px;
height: 200px;
/*鼠标放到元素上变成小手*/
cursor: pointer;
/*让子元素保留其3D位置*/
transform-style: preserve-3d;
/* 动画 名称 时长 linear 是匀速 播放 infinite 是无限次播放*/
animation: rotate 20s linear infinite;
}
section:hover{
/*鼠标放到元素上停止动画*/
animation-play-state: paused;
}
section div{
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
text-align: center;
/*设置元素的倒影效果 below是倒影效果在元素下方
15px是元素和倒影的距离 后面的属性和背景渐变色是一个属性
设置了一个从下到上由背景透明色过渡到设置了不透明度的白色*/
-webkit-box-reflect:below 15px
-webkit-linear-gradient(transparent 10%,
rgba(255,255,255,0.3));
}
section div:nth-child(1){
transform: translateZ(300px);
background-color: #c14c39;
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(300px);
background-color: #6e9c72;
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(300px);
background-color: #5e5f7a;
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(300px);
background-color: #f5eb98;
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(300px);
background-color: #50a3bc;
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(300px);
background-color: #f9a99a;
}
/*定义旋转动画*/
@keyframes rotate{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
img{
width: 300px;
height:200px
}
</style>
</head>
<body>
<section>
<div>
<img src="./img/10.jpeg"/>
</div>
<div>
<img src="./img/8.jpeg"/>
</div>
<div>
<img src="./img/9.jpeg"/>
</div>
<div>
<img src="./img/4.jpeg"/>
</div>
<div>
<img src="./img/5.jpeg"/>
</div>
<div>
<img src="./img/6.jpeg"/>
</div>
</section>
</body>
</html>
