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

15 篇文章 0 订阅
15 篇文章 1 订阅

目录

 

前言

HTML部分源码

CSS部分源码

JS部分源码


前言

        还在为节日不知道送女朋友什么而烦恼?还在为父母不知道计算机专业是写代码而烦恼?还在为母亲节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

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

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A Lucky Boy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值