3D旋转动画：HTML+CSS+JavaScript实现立体翻转-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45141428/article/details/111186171

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flash</title>
    <style>
  body{
      perspective: 1000px;
  }
  section{
      position: relative;
      width: 300px;
      height: 200px;
      margin: 200px auto;
      transform-style: preserve-3d;
      animation: rotate 20s linear infinite;
      background: url("h1.jpeg");
  }
  section:hover{
      animation-play-state: paused;
  }
  @keyframes rotate{
    0%{
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
  }
  section div{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("h2.jpeg");
  }
  section div:nth-child(1){
      transform: translateZ(300px);
  }
  section div:nth-child(2){
      transform: rotateY(60deg) translateZ(300px)
  }
  section div:nth-child(3){
      transform: rotateY(120deg) translateZ(300px)
  }
  section div:nth-child(4){
      transform: rotateY(180deg) translateZ(300px)
  }
  section div:nth-child(5){
      transform: rotateY(240deg) translateZ(300px)
  }
  section div:nth-child(6){
      transform: rotateY(300deg) translateZ(300px)
  }
    </style>
</head>

<body>

   <section>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </section>
</body>

</html>