教你一招实现3D图片演示-木庄网络博客

2022-04-07 21:24:27 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

本篇文章给大家详细介绍一下制作3D图片的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1、创建一个父容器，将所有照片叠放在一起

代码如下（html）：

<div id="darg-container" class="darg">
    <!-- 父容器，相当于把所有图片都放在一起 -->
  <div id="spin-container">
    <img src="1.jpg" alt="">
    <img src="2.jpg" alt="">
    <img src="3.jpg" alt="">
    <img src="4.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="6.jpg" alt="">
    <img src="8.jpg" alt="">
 
    <a target="_blank" href="7.jpg">
      <img src="7.jpg" alt="">
    </a>
 
 
    <!-- <video controls autoplay="autoplay" loop>
      <source src="8.jpg" type="video/mp4">
    </video> -->
 
    <p>3D Tiktok Carousel</p>
  </div>
  <div id="ground"></div>
</div>

2、给所有照片加上旋转动画

代码如下（js）：

function init(delayTime) {
  // 给所有的图片加动画
  for (var i = 0; i < aEle.length; i++) {
    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"
    aEle[i].style.transition = "transform 1s"
    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + 's'
  }
}
setTimeout(init, 1000)