旋转相册

最新推荐文章于 2023-12-25 15:12:45 发布

FlashCanSavetheWorld

最新推荐文章于 2023-12-25 15:12:45 发布

阅读量273

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45141428/article/details/111186171

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

FlashCanSavetheWorld

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
旋转相册

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flash</title> <style> body{ perspective: 1000px; } section{ position: relative; width: 300px; height:
复制链接

扫一扫

专栏目录