前端实现3D旋转木马相册

最新推荐文章于 2023-08-02 19:52:27 发布

代码De搬运工

最新推荐文章于 2023-08-02 19:52:27 发布

阅读量1k

点赞数 3

文章标签： css3 前端 css javascript

本文链接：https://blog.csdn.net/m0_46577631/article/details/127967001

版权

前端实现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>