<meta charset="UTF-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>图册</title>
<!-- 如果我有天醒来 -->
<!-- 层叠样式表 -->
<style type="text/css">
  /* 去掉默认效果 */
  * {
    margin: 0;
    padding: 0;
  }

  body {
    background: #222;
    overflow: hidden;
    /* 取消选中 */
    user-select: none;
  }

  @keyframes rotate {
    100% {
      transform: rotateY(360deg);
    }
  }

  .perspective {
    /*子元素透视 场景深度*/
    perspective: 600px;
  }

  .wrap {
    /* 3d */
    width: 135px;
    height: 240px;
    margin: 100px auto;
    position: relative;
    /* border: 1px solid red; */
    transform: rotateX(-20deg) rotateY(0deg);
    transform-style: preserve-3d;
  }

  .wrap img {
    display: block;
    /* 绝对定位 */
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(0deg) translateZ(0px);
    background: transparent;
    box-shadow: 0 0 4px #fff;
    border-radius: 5px;

    /* webkit */
  }

  /* 照片底座 */
  .wrap p {
    width: 1200px;
    height: 1200px;
    background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, 0.5), rgba(0, 0, 0, 0));
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 100%;
    margin-left: -600px;
    margin-top: -600px;
    /* 沿着x轴按倒 */
    transform: rotateX(90deg);
  }
</style>

<!-- 盒子容器 -->
<div class="perspective">
  <div class="wrap" id="imgwrap">
    <!-- 引入图片值页面 -->
     //图片自选
    <img class="f1" src="01.jpg" />
    <img class="f1" src="02.jpg" />
    <img class="f1" src="03.jpg" />
    <img class="f1" src="1.webp" />
    <img class="f1" src="2.webp" />
    <img class="f1" src="3.webp" />
    <img class="f1" src="4.webp" />
    <img class="f1" src="5.webp" />
    <img class="f1" src="6.webp" />
    <img class="f1" src="7.webp" />
    <img class="f1" src="8.webp" />
    <img class="f1" src="9.webp" />
    <img class="f1" src="10.webp" />
    <img class="f1" src="11.webp" />
    <img class="f1" src="12.webp" />
    <img class="f1" src="13.webp" />
    <img class="f1" src="14.webp" />
    <img class="f1" src="15.webp" />
    <img class="f1" src="16.webp" />

    <img class="f1" src="17.webp" />
    <img class="f1" src="18.webp" />
    <img class="f1" src="19.webp" />
    <img class="f1" src="20.webp" />
    <img class="f1" src="21.webp" />
    <img class="f1" src="22.webp" />
    <img class="f1" src="23.webp" />
    <img class="f1" src="24.webp" />
    <img class="f1" src="25.webp" />
    <img class="f1" src="26.webp" />
    <img class="f1" src="27.png" />
    <img class="f1" src="27.webp" />
    <img class="f1" src="01.jpg" />
    <img class="f1" src="02.jpg" />

    <!-- 引入图片值页面 -->
    <img class="f2" src="01.jpg" />
    <img class="f2" src="02.jpg" />
    <img class="f2" src="03.jpg" />
    <img class="f2" src="4.webp" />
    <img class="f2" src="5.webp" />

    <img class="f2" src="6.webp" />
    <img class="f2" src="7.webp" />
    <img class="f2" src="8.webp" />
    <img class="f2" src="9.webp" />
    <img class="f2" src="10.webp" />
    <img class="f2" src="11.webp" />
    <img class="f2" src="12.webp" />
    <img class="f2" src="13.webp" />
    <img class="f2" src="14.webp" />
    <img class="f2" src="15.webp" />
    <img class="f2" src="16.webp" />
    <img class="f2" src="17.webp" />
    <img class="f2" src="18.webp" />
    <img class="f2" src="19.webp" />
    <img class="f2" src="20.webp" />
    <img class="f2" src="21.webp" />
    <img class="f2" src="22.webp" />
    <img class="f2" src="23.webp" />
    <img class="f2" src="24.webp" />
    <img class="f2" src="25.webp" />
    <img class="f2" src="26.webp" />
    <img class="f2" src="27.png" />
    <img class="f2" src="27.webp" />
    <img class="f2" src="1.webp" />
    <img class="f2" src="2.webp" />
    <img class="f2" src="3.webp" />
    <img class="f2" src="01.jpg" />
    <img class="f2" src="02.jpg" />
    <!-- 引入图片值页面 -->

    <img class="f3" src="01.jpg" />
    <img class="f3" src="02.jpg" />
    <img class="f3" src="03.jpg" />
    <img class="f3" src="4.webp" />
    <img class="f3" src="5.webp" />
    <img class="f3" src="6.webp" />
    <img class="f3" src="7.webp" />
    <img class="f3" src="8.webp" />
    <img class="f3" src="9.webp" />
    <img class="f3" src="10.webp" />

    <img class="f3" src="11.webp" />
    <img class="f3" src="12.webp" />
    <img class="f3" src="13.webp" />
    <img class="f3" src="14.webp" />

    <img class="f3" src="15.webp" />
    <img class="f3" src="16.webp" />
    <img class="f3" src="17.webp" />
    <img class="f3" src="18.webp" />

    <img class="f3" src="20.webp" />
    <img class="f3" src="19.webp" />
    <img class="f3" src="21.webp" />
    <img class="f3" src="22.webp" />
    <img class="f3" src="23.webp" />
    <img class="f3" src="24.webp" />
    <img class="f3" src="25.webp" />
    <img class="f3" src="26.webp" />
    <img class="f3" src="27.png" />
    <img class="f3" src="01.jpg" />
    <img class="f3" src="02.jpg" />
    <img class="f3" src="010.webp" />
    <img class="f3" src="5.webp" />
    <img class="f3" src="6.webp" />
    <img class="f3" src="7.webp" />

    <p></p>
  </div>
</div>
<!--  src="JS/photo.js" -->
<script type="text/javascript">
  var oImg = document.getElementsByClassName("f1");
  var oImg2 = document.getElementsByClassName("f2");
  var oImg3 = document.getElementsByClassName("f3");
  var len = oImg.length;
  console.log(len);
  var deg = 360 / len;

  var oWrap = document.getElementById("imgwrap");
  // var oWrap=document.querySelector('.wrap');

  //页面加载完毕在执行的代码
  window.onload = function () {
    Array.prototype.forEach.call(oImg, function (ele, index, self) {
      // 旋转并沿Z轴平移
      ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
      //过渡时间1s
      ele.style.transition = "1s " + (len - index) * 0.1 + "s";
    });
    Array.prototype.forEach.call(oImg2, function (ele, index, self) {
      // 旋转并沿Z轴平移
      ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
      //过渡时间1s
      ele.style.transition = "1s " + (len - index) * 0.1 + "s";
    });
    Array.prototype.forEach.call(oImg3, function (ele, index, self) {
      // 旋转并沿Z轴平移
      ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
      //过渡时间1s
      ele.style.transition = "1s " + (len - index) * 0.1 + "s";
    });
    // Array.prototype.forEach.call(oImg, function (ele, index, self) {
    //       // 旋转并沿Z轴平移
    //       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
    //       //过渡时间1s
    //       ele.style.transition = "1s " + (len - index) * 0.1 + "s";

    // });
  };
  //翻动3D相册
  var newX,
    newY,
    lastX,
    lastY,
    minusX,
    minusY,
    rotX = -20,
    rotY = 0;

  document.onmousedown = function (e) {
    // 点击设置初值
    lastX = e.clientX;
    lastY = e.clientY;

    this.onmousemove = function (e) {
      newX = e.clientX;
      newY = e.clientY;
      minusX = newX - lastX;
      minusY = newY - lastY;

      rotX -= minusY * 0.2;
      rotY += minusX * 0.1;
      oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
      lastX = newX;
      lastY = newY;
    };
    this.onmouseup = function (e) {
      //鼠标松开
      this.onmousemove = null; //清除鼠标移动
    };
  };
</script>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .种花家{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            border-radius: 50%;
            animation: dh 5s linear   2s  running;
        }
        .种花家:hover{
            animation-play-state: paused;
        }
        @keyframes dh{
            0%{background: red;left: 0;}
            25%{background:pink; left: 25px;}
            50%{background:blue; left: 50px;}
            75%{background:orange; left: 75px;}
            100%{background:green; left: 100px;}

}

        @keyframes dhh{
            0%{background: red;left: 0;}
            25%{background:pink;left: 25px;}
            50%{background:blue;left: 50px;}
            75%{background:orange;left: 75px;}
            100%{background:green;left: 100px;}
            }
        
        .种花家1{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: relative;
            animation: dhh 5s linear;
        }
    </style>
</head>
<body>

演示:1216.mov

    <div class="种花家"></div>
    <hr />
    <div class="种花家1"></div>
</body>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .box {
        width: 200px;
        height: 400px;
        border: 1px solid red;
        margin: 100px auto;
        position: relative;
    }

    .brand {
        width: 200px;
        height: 400px;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid black;
        background: url(170.png);
        transform-origin: 100px 400px;
        transition-property: all;
        transition-duration: 1.5s;
        /* 回弹效果 */
        transition-timing-function: linear;
    }


    .box:hover .brand:nth-child(1) {
        transform: rotate(-90deg);
    }

    .box:hover .brand:nth-child(2) {
        transform: rotate(-80deg);
    }

    .box:hover .brand:nth-child(3) {
        transform: rotate(-70deg);
    }

    .box:hover .brand:nth-child(4) {
        transform: rotate(-60deg);
    }

    .box:hover .brand:nth-child(5) {
        transform: rotate(-50deg);
    }

    .box:hover .brand:nth-child(6) {
        transform: rotate(-40deg);
    }

    .box:hover .brand:nth-child(7) {
        transform: rotate(-30deg);
    }

    .box:hover .brand:nth-child(8) {
        transform: rotate(-20deg);
    }

    .box:hover .brand:nth-child(9) {
        transform: rotate(-10deg);
    }

    .box:hover .brand:nth-child(10) {
        transform: rotate(00deg);
    }

    .box:hover .brand:nth-child(11) {
        transform: rotate(10deg);
    }

    .box:hover .brand:nth-child(12) {
        transform: rotate(20deg);
    }

    .box:hover .brand:nth-child(13) {
        transform: rotate(30deg);
    }
    .box:hover .brand:nth-child(14) {
        transform: rotate(40deg);
    }
    .box:hover .brand:nth-child(15) {
        transform: rotate(50deg);
    }
    .box:hover .brand:nth-child(16) {
        transform: rotate(60deg);
    }
    .box:hover .brand:nth-child(17) {
        transform: rotate(70deg);
    }
    .box:hover .brand:nth-child(18) {
        transform: rotate(80deg);
    }
    .box:hover .brand:nth-child(19) {
        transform: rotate(90deg);
    }
</style>

    <div class="box">
    <div class="brand">1</div>
    <div class="brand">2</div>
    <div class="brand">3</div>
    <div class="brand">4</div>
    <div class="brand">5</div>
    <div class="brand">6</div>
    <div class="brand">7</div>
    <div class="brand">8</div>
    <div class="brand">9</div>
    <div class="brand">10</div>
    <div class="brand">11</div>
    <div class="brand">12</div>
    <div class="brand">13</div>
    <div class="brand">14</div>
    <div class="brand">15</div>
    <div class="brand">16</div>
    <div class="brand">17</div>
    <div class="brand">18</div>
    <div class="brand">19</div>
</div>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .box {
        width: 200px;
        height: 400px;
        border: 1px solid black;
        margin: 100px auto;
        position: relative;
    }

    .brand {
        width: 100%;
        height: 400px;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid black;
        background: url(./images/goast.jpg);
        transform-origin: 100px 400px;
        transition-property: all;
        transition-duration: 1.5s;
        /* 回弹效果 */
        transition-timing-function: linear;
    }


    .box:hover .brand:nth-child(1) {
        transform: rotate(-60deg);
    }

    .box:hover .brand:nth-child(2) {
        transform: rotate(-50deg);
    }

    .box:hover .brand:nth-child(3) {
        transform: rotate(-40deg);
    }

    .box:hover .brand:nth-child(4) {
        transform: rotate(-30deg);
    }

    .box:hover .brand:nth-child(5) {
        transform: rotate(-20deg);
    }

    .box:hover .brand:nth-child(6) {
        transform: rotate(-10deg);
    }

    .box:hover .brand:nth-child(7) {
        transform: rotate(0deg);
    }

    .box:hover .brand:nth-child(8) {
        transform: rotate(10deg);
    }

    .box:hover .brand:nth-child(9) {
        transform: rotate(20deg);
    }

    .box:hover .brand:nth-child(10) {
        transform: rotate(30deg);
    }

    .box:hover .brand:nth-child(11) {
        transform: rotate(40deg);
    }

    .box:hover .brand:nth-child(12) {
        transform: rotate(50deg);
    }

    .box:hover .brand:nth-child(13) {
        transform: rotate(60deg);
    }
</style>

演示:QQ录屏20231130132641.mov

    <div class="box">
    <div class="brand">A</div>
    <div class="brand">2</div>
    <div class="brand">3</div>
    <div class="brand">4</div>
    <div class="brand">5</div>
    <div class="brand">6</div>
    <div class="brand">7</div>
    <div class="brand">8</div>
    <div class="brand">9</div>
    <div class="brand">10</div>
    <div class="brand">J</div>
    <div class="brand">Q</div>
    <div class="brand">K</div>
</div>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .box {
        width: 200px;
        height: 400px;
        border: 1px solid black;
        margin: 100px auto;
        position: relative;
    }

    .brand {
        width: 100%;
        height: 400px;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid black;
        background: url(123.jpg);
        transform-origin: 100px 400px;
        transition-property: all;
        transition-duration: 1.5s;
        /* 回弹效果 */
        transition-timing-function: linear;
    }


    .box:hover .brand:nth-child(1) {
        transform: rotate(-190deg);
    }

    .box:hover .brand:nth-child(2) {
        transform: rotate(-180deg);
    }

    .box:hover .brand:nth-child(3) {
        transform: rotate(-170deg);
    }

    .box:hover .brand:nth-child(4) {
        transform: rotate(-160deg);
    }

    .box:hover .brand:nth-child(5) {
        transform: rotate(-150deg);
    }

    .box:hover .brand:nth-child(6) {
        transform: rotate(-140deg);
    }

    .box:hover .brand:nth-child(7) {
        transform: rotate(-130deg);
    }

    .box:hover .brand:nth-child(8) {
        transform: rotate(-120deg);
    }

    .box:hover .brand:nth-child(9) {
        transform: rotate(-110deg);
    }

    .box:hover .brand:nth-child(10) {
        transform: rotate(-100deg);
    }

    .box:hover .brand:nth-child(11) {
        transform: rotate(-90deg);
    }

    .box:hover .brand:nth-child(12) {
        transform: rotate(-80deg);
    }

    .box:hover .brand:nth-child(13) {
        transform: rotate(-70deg);
    }
    .box:hover .brand:nth-child(14) {
        transform: rotate(-60deg);
    }
    .box:hover .brand:nth-child(15) {
        transform: rotate(-50deg);
    }
    .box:hover .brand:nth-child(16) {
        transform: rotate(-40deg);
    }
    .box:hover .brand:nth-child(17) {
        transform: rotate(-30deg);
    }
    .box:hover .brand:nth-child(18) {
        transform: rotate(-20deg);
    }
    .box:hover .brand:nth-child(19) {
        transform: rotate(-10deg);    
    }
    .box:hover .brand:nth-child(20) {
        transform: rotate(0deg);    
    }
    .box:hover .brand:nth-child(21) {
        transform: rotate(10deg);    
    }
    .box:hover .brand:nth-child(22) {
        transform: rotate(20deg);    
    }
    .box:hover .brand:nth-child(23) {
        transform: rotate(30deg);    
    }
    .box:hover .brand:nth-child(24) {
        transform: rotate(40deg);    
    }
    .box:hover .brand:nth-child(25) {
        transform: rotate(50deg);    
    }
    
    .box:hover .brand:nth-child(26) {
        transform: rotate(60deg);    
    }
    .box:hover .brand:nth-child(27) {
        transform: rotate(70deg);    
    }
    .box:hover .brand:nth-child(28) {
        transform: rotate(80deg);    
    }
    .box:hover .brand:nth-child(29) {
        transform: rotate(90deg);    
    }
    .box:hover .brand:nth-child(30) {
        transform: rotate(100deg);    
    }
    .box:hover .brand:nth-child(31) {
        transform: rotate(110deg);    
    }
    .box:hover .brand:nth-child(32) {
        transform: rotate(120deg);    
    }
    .box:hover .brand:nth-child(33) {
        transform: rotate(130deg);    
    }
    .box:hover .brand:nth-child(34) {
        transform: rotate(140deg);    
    }
    .box:hover .brand:nth-child(35) {
        transform: rotate(150deg);    
    }
    .box:hover .brand:nth-child(36) {
        transform: rotate(160deg);    
    }
    .box:hover .brand:nth-child(37) {
        transform: rotate(170deg);    
    }
    .box:hover .brand:nth-child(38) {
        transform: rotate(180deg);    
    }
    .box:hover .brand:nth-child(39) {
        transform: rotate(190deg);    
    }
</style>

    <div class="box">
    <div class="brand">1</div>
    <div class="brand">2</div>
    <div class="brand">3</div>
    <div class="brand">4</div>
    <div class="brand">5</div>
    <div class="brand">6</div>
    <div class="brand">7</div>
    <div class="brand">8</div>
    <div class="brand">9</div>
    <div class="brand">10</div>
    <div class="brand">11</div>
    <div class="brand">12</div>
    <div class="brand">13</div>
    <div class="brand">14</div>
    <div class="brand">15</div>
    <div class="brand">16</div>
    <div class="brand">17</div>
    <div class="brand">18</div>
    <div class="brand">19</div>
    <div class="brand">20</div>
    <div class="brand">21</div>
    <div class="brand">22</div>
    <div class="brand">23</div>
    <div class="brand">24</div>
    <div class="brand">25</div>
    <div class="brand">26</div>
    <div class="brand">27</div>
    <div class="brand">28</div>
    <div class="brand">29</div>
    <div class="brand">30</div>
    <div class="brand">31</div>
    <div class="brand">32</div>
    <div class="brand">33</div>
    <div class="brand">34</div>
    <div class="brand">35</div>
    <div class="brand">36</div>
    <div class="brand">37</div>
    <div class="brand">38</div>
    <div class="brand">39</div>

</div>

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #lunbo{
            position:relative;
            margin: 100px auto;
            width: 500px;
            height: 150px;
            overflow: hidden;
            }
            #lunbo ul{
                position: absolute;
                left: 0;
                top: 0;
                }
                #lunbo li{
                    float: left;
                    height: 150px;
                    width: 200px;
                    list-style: none;
                    }
                    #lunbo li img{
                        width:200px;
                        height: 150px;
                        }
</style>
</head>
<body>

！！！

！！！

            <script type="text/javascript">
                window.onload=function(){
                    var oDiv=document.getElementById("lunbo")
                    var oUl=document.getElementsByTagName('ul')[0]
                    var oLi=document.getElementsByTagName('li')
                    var timer=null
                    oUl.innerHTML+=oUl.innerHTML
                    oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'
                    //oul.innerHTML=oUl, innerHTML+oUl.innerHTML，与前面oUl.innerHTNL +=oUL.innerHTML一样
                    timer=setInterval(function(){
                        if(oUl.offsetLeft<-oUl.offsetwidth/2){//判断2个ul长度，如果到一半了，就Left归e
                        oUl.style.left='0'}
                        oUl.style.left=oUl.offsetLeft-2+'pX'//定时器改变uL的Left值。每次uL的eft都-2pX
                        },30)
                        //鼠标移入,停止移动
                        oDiv.onmousemove=function(){
                            clearInterval(timer)
                            }
                            //鼠标移出,继续移动
                            oDiv.onmouseout=function(){
                                timer=setInterval(function(){
                                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                                    oUl.style.left='0'}
                                    oUl.style.left=oUl.offsetLeft-2+'px'
                                    }, 30)
                                    }
            }
    </script>                    
</body>