抖音上很火的3D立体动态相册实现代码!

前端实现3D立体动态相册

原创于 2022-09-08 21:00:54 发布 · 3.6k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #前端 #html

good method 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用HTML和CSS创建一个3D立体动态相册，通过调整图片尺寸和角度，实现旋转展示效果。步骤包括设置HTML结构、CSS样式以及处理可能出现的展示问题。适合前端开发者学习，也可直接获取代码包替换图片使用。

该文章已生成可运行项目，

今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。

正文：
一、新建一个index.html的文件，代码如下

<!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>
    <link rel="stylesheet" href="./3D.css" />
  </head>
  <body>
    <section>
        <img src="./img/01.jpeg" alt="">
        <img src="./img/06.jpeg" alt="">
        <img src="./img/03.jpeg" alt="">
        <img src="./img/04.jpeg" alt="">
        <img src="./img/05.jpeg" alt="">
        <img src="./img/02.jpeg" alt="">
      </section>
  </body>
</html>

二、css样式的代码

body {
    background-color: #000;
    /* 视距 */
    perspective: 900px;
  }

  section {
    margin: 20vh auto;
    position: relative;
    width: 200px;
    height: 400px;
    /* 开启3D空间 */
    transform-style: preserve-3d;
    /* 动画：动画名 一次动画时间 平稳 无限循环 */
    animation: rotate 20s linear infinite;
  }
  section img {
    width: 250px;
    height: 400px;
    /* 设置定位，先将图片都放在同一位置 */
    position: absolute;
    left: 0;
    top: 0;
  }

  /* 让第一个img子元素竖直旋转0度，向外推100px（因为盒子边长200px），其他同理 */
  section img:nth-child(1) {
    transform: rotateY(0deg) translateZ(100px);
  }

  section img:nth-child(2) {
    transform: rotateY(90deg) translateZ(100px);
  }

  section img:nth-child(3) {
    transform: rotateY(180deg) translateZ(100px);
  }

  section img:nth-child(4) {
    transform: rotateY(270deg) translateZ(100px);
  }

  section img:nth-child(5) {
    transform: rotateX(90deg) translateZ(100px);
  }

  section img:nth-child(6) {
    transform: rotateX(-90deg) translateZ(100px);
  }
section img:nth-child(1) {
    transform: rotateY(0deg) translateZ(240px);
  }

  section img:nth-child(2) {
    transform: rotateY(60deg) translateZ(240px);
  }

  section img:nth-child(3) {
    transform: rotateY(120deg) translateZ(240px);
  }

  section img:nth-child(4) {
    transform: rotateY(180deg) translateZ(240px);
  }

  section img:nth-child(5) {
    transform: rotateY(240deg) translateZ(240px);
  }

  section img:nth-child(6) {
    transform: rotateY(300deg) translateZ(240px);
  }

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

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