HTML+CSS制作3D旋转相册

最新推荐文章于 2023-12-23 17:03:38 发布

夢の終わりだ

最新推荐文章于 2023-12-23 17:03:38 发布

阅读量302

点赞数

文章标签： css html 3d

本文链接：https://blog.csdn.net/qq_74765452/article/details/129757625

版权

该文章展示了一段HTML和CSS代码，用于制作一个3D旋转相册效果。通过CSS的transform属性和动画关键帧(@keyframes)实现相册图片的连续旋转展示，创建了具有透视效果的立体空间。

摘要由CSDN通过智能技术生成

HTML+CSS制作3D旋转相册

话不多说直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <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>
</head>
<style>
  body {
    /* 建立透视 */
    perspective: 1000px;
  }

  section {
    /* 子绝父相 */
    position: relative;
    width: 300px;
    height: 200px;
    margin: 150px auto;
    /* 建立3D立体空间 */
    transform-style: preserve-3d;
    animation: rotate 3s linear    infinite;
  }

  section div {
    /* 将盒子约束于一行 */
    position: absolute;
    width: 100%;
    height: 100%;
  }

  /* 制作动漫 */
  @keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }

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

  section div:nth-child(1) {
    background: url(pic1.jpg) no-repeat;
    /* 定义背景图片大小 */
    background-size: 100%;
    /* 进行旋转后位移 */
    /* 每次旋转多加60度 可自行调节 */
    transform: rotateY(0deg) translateZ(300px);
  }

  section div:nth-child(2) {
    background: url(pic1.jpg) no-repeat;
    /* 定义背景图片大小 */
    background-size: 100%;
    /* 进行旋转后位移 */
    /* 每次旋转多加60度 可自行调节 */
    transform: rotateY(60deg) translateZ(300px);
  }

  section div:nth-child(3) {
    background: url(pic1.jpg) no-repeat;
    /* 定义背景图片大小 */
    background-size: 100%;
    /* 进行旋转后位移 */
    /* 每次旋转多加60度 可自行调节 */
    transform: rotateY(120deg) translateZ(300px);
  }

  section div:nth-child(4) {
    background: url(pic1.jpg) no-repeat;
    /* 定义背景图片大小 */
    background-size: 100%;
    /* 进行旋转后位移 */
    /* 每次旋转多加60度 可自行调节 */
    transform: rotateY(180deg) translateZ(300px);
  }

  section div:nth-child(5) {
    background: url(pic1.jpg) no-repeat;
    /* 定义背景图片大小 */
    background-size: 100%;
    /* 进行旋转后位移 */
    /* 每次旋转多加60度 可自行调节 */
    transform: rotateY(240deg) translateZ(300px);
  }

  section div:nth-child(6) {
    background: url(pic1.jpg) no-repeat;
    /* 定义背景图片大小 */
    background-size: 100%;
    /* 进行旋转后位移 */
    /* 每次旋转多加60度 可自行调节 */
    transform: rotateY(300deg) translateZ(300px);
  }
</style>

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

</html>