3D效果轮播图

3D效果轮播图

代码

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      perspective: 800px;
      transform-style: preserve-3d;
    }

    .box {
      display: flex;
      width: 250px;
      height: 250px;
      margin: 150px auto;
      /*   overflow: hidden; 溢出隐藏和3D变化会导致子元素溢出父元素盒子的问题相冲突,会导致不同图片3D效果切换无法实现*/
      position: relative;
      transform-style: preserve-3d;
      transition: all 0.5s;
    }

    img {
      display: block;
      width: 250px;
      height: 250px;
      position: absolute;
      top: 0;
      left: 0;
      /* position: absolute; */
    }

    @keyframes ro {
      0% {
        transform: rotateX(90deg);
      }

      10% {
        transform: rotateY(90deg);
      }

      20% {
        transform: rotateY(90deg);
      }

      30% {
        transform: rotateZ(90deg);
      }

      40% {
        transform: rotateZ(90deg);
      }

      50% {
        transform: rotateY(90deg);
      }

      60% {
        transform: rotateX(90deg);
      }

      70% {
        transform: rotateX(180deg);
      }

      80% {
        transform: rotateZ(-90deg);
      }

      90% {
        transform: rotateY(-90deg);
      }

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

    @keyframes fd {
      50% {
        transform: scale3d(1.5, 1.5, 1.5)
      }
      100% {
        transform: scale3d(1, 1, 1);
      }
    }

    .box .front {
      transform: translateZ(125px);
    }

    .box .back {
      transform: translateZ(-125px) rotateX(180deg);
    }

    .box .up {
      transform: translateY(-125px) rotateX(90deg);
    }

    .box .down {
      transform: translateY(125px) rotateX(-90deg);
    }

    .box .left {
      transform: translateX(-125px) rotateY(-90deg);
    }

    .box .right {
      transform: translate(125px) rotateY(90deg);
    }
    /*  .box .back {
      transform: translateZ(1250px) rotateX(180deg);
    } */
    
    .box {
      animation: ro 9s linear infinite alternate forwards/* , fd 9s 0.2s linear backwards */;
    }
    
    .box:hover {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./image/front.jpg" alt="" class="front">
    <img src="./image/back.jpg" alt="" class="back">
    <img src="./image/up.jpg" alt="" class="up">
    <img src="./image/down.jpg" alt="" class="down">
    <img src="./image/left.jpg" alt="" class="left">
    <img src="./image/right.jpg" alt="" class="right">
    </img>
</body>
</html>

效果图

相关推荐
yume_sibai10 小时前
HTML HTML基础(3)
前端·html
一碗白开水一11 小时前
【论文阅读】Far3D: Expanding the Horizon for Surround-view 3D Object Detection
论文阅读·人工智能·深度学习·算法·目标检测·计算机视觉·3d
接着奏乐接着舞。11 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
jason_yang11 小时前
基于BEM规范实现ElementPlus组件
css·scss
XiaoMu_00112 小时前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
Hi Z x y14 小时前
3dtiles 加载问题
3d
UNbuff_014 小时前
HTML 各种事件的使用说明书
前端·html
二川bro21 小时前
第27节:3D数据可视化与大规模地形渲染
3d·信息可视化
@大迁世界1 天前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说1 天前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first