【3D旋转墙】最简单的3d旋转墙

最新推荐文章于 2024-06-14 08:57:40 发布

A Lucky Boy

最新推荐文章于 2024-06-14 08:57:40 发布

阅读量591

点赞数 5

本文链接：https://blog.csdn.net/weixin_43797577/article/details/124536887

版权

javascript 同时被 3 个专栏收录

39 篇文章 2 订阅

订阅专栏

HTML

15 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 1 订阅

订阅专栏

前言

还在为节日不知道送女朋友什么而烦恼？还在为父母不知道计算机专业是写代码而烦恼？还在为母亲节or父亲节送父母礼物父母说不要乱花钱？(当然父母只是口头说一下他们什么都不缺，但收到孩子送的礼物，心里还是很高兴的)，还在为最近爆火的3D旋转墙不知道如何实现而烦恼？那么这篇博文可能对你很大的帮助，利用HTML、CSS、JavaScript实现史上最简单的3D旋转墙，关注博主，助你解决以上所有烦恼

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>
</head>
<!-- 导入css、js相关文件 -->
<link rel="stylesheet" href="../CSS/style.css">
<script src="../JS/scrpit.js"></script>

<body>
  <div>
    <!-- 放入图片 -->
    <img src="../pic/6695.png" alt="">
    <img src="../pic/397.png" alt="">
    <img src="../pic/pic.png" alt="">
    <img src="../pic/mp.itc.png" alt="">
    <!-- 中间图片 -->
    <img src="../pic/JPEG.png" alt="" style="width: 500px;">
    <img src="../pic/JaPEG.png" alt="">
    <img src="../pic/hdslb.png" alt="">
    <img src="../pic/greenxf.png" alt="">
    <img src="../pic/ftuguaishou.png" alt="">
  </div>
  <!-- 点击屏幕播放音乐 适用于手机微信、电脑等 循环播放 -->
  <audio autoplay loop id="audios">
    <source src="../audio/Lost Frequencies _ Janieck - Reality.mp3">
  </audio>
</body>

</html>

CSS部分源码

body {
  perspective: 5000px;
}

img {
  width: 300px;
  height: 500px;
  position: absolute;
}

/* 图片位置  旋转角度 距离远近 */
img:nth-child(1) {
  transform: translateZ(500px);
}

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


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


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


img:nth-child(5) {
  transform: rotateY(60deg) translateX(30px)
}

img:nth-child(6) {
  transform: rotateY(-60deg) translateZ(-500px);
}

img:nth-child(7) {
  transform: rotateY(-60deg) translateZ(500px);
}

img:nth-child(8) {
  transform: rotateY(-180deg) translateZ(500px);
}

img:nth-child(9) {
  transform: rotateY(-300deg) translateZ(500px) translateX(30px);
}

div {
  margin: 0 auto;
  margin-top: 100px;
  transform-style: preserve-3d;
  /* 调用下边关键帧 20s一圈 无限播放 */
  animation: rotate 20s linear infinite;
  height: 500px;
  width: 500px;
}

/* 关键帧 动态效果 */
@keyframes rotate {
  0% {
    transform: rotateX(-15deg) rotateY(0);
  }

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

img:nth-child是给每个图片单独设置样式，使每张图片绕自身Y轴旋转一定角度，角度取决于你放了多少张图片，有n张图，则每张图片依次旋转360/n度，比如这里我放了8张图，那么每张图应依次比上一张图片多旋转360/8=45度，层层递进，如0度、45度、90度、135度、180度、225度、270度、315度，再使每张图片向自身的Z轴（此时每张图片的Z轴方向都已改变）都设置一个正向(全为负值也可)的等距离的位移，使其扩散开，我这里的写法效果也一样，旋转45度位移 - 500px其实和旋转225度位移500px效果是一样的。

JS部分源码


// 这里使用了微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function () {
  document.querySelector('#audios').play()
})
// 触摸事件
document.addEventListener('touchstart', function () {
  document.querySelector('#audios').play()

})

// 点击事件
document.addEventListener('click', function () {
  document.querySelector('#audios').play()

})

当然，如果不想使用cv大法，那么博主还贴心的准备了Github的源码地址，访问以下链接直接下载即可：https://github.com/wmc1459563528/3DRotating-wall

附上最终成品效果(此图为网图，但最终效果和这个效果类似)

A Lucky Boy

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
5
评论
【3D旋转墙】最简单的3d旋转墙

还在为节日不知道送女朋友什么而烦恼？还在为父母不知道计算机专业是写代码而烦恼？还在为母亲节or父亲节送父母礼物父母说不要乱花钱？(当然父母只是口头说一下他们什么都不缺，但收到孩子送的礼物，心里还是很高兴的)，还在为最近爆火的3D旋转墙不知道如何实现而烦恼？那么这篇博文可能对你很大的帮助，利用HTML、CSS、JavaScript实现史上最简单的3D旋转墙，关注博主，助你解决以上所有烦恼！！！！！
复制链接

扫一扫