

3D旋转画廊（python）

码途钥匙

2024-10-26

导读：效果图一、HTML 结构文档基本设置及引入外部资源，<body>中有图片容器<div

效果图

一、HTML 结构

文档基本设置及引入外部资源，<body>中有图片容器<div>含多个<span>及<img>，还有按钮容器<div>含两个按钮。

二、CSS 样式

body整体设置，image-container及内部元素设置 3D 效果及样式，btn-container和btn设置按钮样式。

三、JavaScript 交互

获取元素，定义变量，给按钮添加点击事件监听器，通过函数更新图片容器旋转角度实现 3D 旋转。

四、代码

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>3D旋转画廊</title>    <link      rel="stylesheet"      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"      crossorigin="anonymous"      referrerpolicy="no-referrer"    />    <style>      body {        margin: 0;        display: flex;        flex-direction: column;        align-items: center;        text-align: center;        height: 100vh;        justify-content: center;        background-color: black;        overflow: hidden;      }      .image-container {        width: 200px;        height: 200px;        transform-style: preserve-3d;        transform: perspective(1000px) rotateY(0deg);        transition: transform 0.7s;      }      .image-container span {        position: absolute;        top: 0;        left: 0;        width: 100%;        transform: rotateY(calc(var(--i) * 90deg)) translateZ(400px);      }      .image-container span img {        position: absolute;        top: 0;        left: 0;        width: 100%;        aspect-ratio: 1/1;        -o-object-fit: cover;        object-fit: cover;      }      .btn-container {        position: relative;        width: 80%;      }      .btn {        position: absolute;        bottom: -140px;        background-color: slateblue;        color: white;        border: none;        padding: 10px 30px;        border-radius: 5px;        cursor: pointer;        font-size: 20px;      }      .btn:hover {        filter: brightness(1.5);      }      #prev {        left: 20%;      }      #next {        right: 20%;      }</style>  </head>  <body>    <div class="image-container">      <span style="--i: 1"        ><img          src="https://pic.rmb.bdstatic.com/bjh/240709/dump/642a76897b5a09c4045857b5202ef43b.jpeg" /></span      ><span style="--i: 2"        ><img          src="https://p8.itc.cn/images01/20231103/ed19cf8c13e448d2af1d97c437cf97d8.jpeg" /></span      ><span style="--i: 3"        ><img          src="https://pic.rmb.bdstatic.com/bjh/240709/dump/acf16e2f1a8cb09f0ca6e460371dbc02.jpeg" /></span      ><span style="--i: 4"        ><img          src="https://p6.itc.cn/images01/20231028/67683d3e4edd4202a0397201940cbd84.jpeg"      /></span>    </div>    <div class="btn-container">      <button class="btn" id="prev">        <i class="fa-solid fa-rotate-left"></i></button      ><button class="btn" id="next">        <i class="fa-solid fa-rotate-right"></i>      </button>    </div>    <script>      const imageContainerEl = document.querySelector('.image-container');      const prevEl = document.getElementById('prev');      const nextEl = document.getElementById('next');      let x = 0;      prevEl.addEventListener('click', () => {        x += 90;        updateGallery();      });      nextEl.addEventListener('click', () => {        x -= 90;        updateGallery();      });      function updateGallery() {        imageContainerEl.style.transform = `perspective(1000px)rotateY(${x}deg)`;      }      updateGallery();</script>  </body></html>