前言

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

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

【3D旋转墙】最简单的3d旋转墙相关推荐

html制作3d筛子,JS实现简单随机3D骰子
本文实例为大家分享了JS实现简单随机3D骰子的具体代码,供大家参考,具体内容如下描述: JS--实现简单的随机3D骰子. 效果: 实现: html文件: Document PLAY css文件: @ ...
html 图片展示 3d,利用CSS3制作简单的3d半透明立方体图片展示
效果图如下: 示例代码: new document //css部分 html{ font-size:62.5%; } img{ width:300px; height:300px; } #stage{ ...
Vue中用Three.js创建一个3D会议室（三）拖动与旋转
第三章文章目录拖动 DragControls 旋转获取鼠标选中的3D模型添加旋转按钮以及旋转方法小贴士虽然现在基本的模型都创建出来了,但是我们3D会议室的主要目的是可以自己摆放会议室中的物 ...
Android做3D旋转动画,Android编程实现3D旋转效果实例
本文实例讲述了Android编程实现3D旋转效果的方法.分享给大家供大家参考,具体如下: 下面的示例是在Android中实现图片3D旋转的效果. 实现3D效果一般使用OpenGL,但在Android平 ...
3D转换之三维坐标系，透视旋转等基础知识
一.三维坐标系三维坐标系就是指立体空间,立体空间是由3个轴共同组成的. 1.x轴:水平向右注意:x右边是正值,左边是负值 2.y轴:垂直向下注意:y下面是正值,上面是负值 3.z轴: ...
css3 3d旋转兼容模式下,CSS3 3D 转换
3D Transforms CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法:rotateX() rotateY() 点击下面的元素,来查看 2D 转 ...
ZAM 3D 制作简单的3D字幕流程(二)
ZAM 3D 制作简单的3D字幕流程(二) 原文:ZAM 3D 制作简单的3D字幕流程(二) 原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表 ...
《3D打印就这么简单》——3.2节组装初期的经验之谈
本节书摘来自异步社区<3D打印就这么简单>一书中的第3章,第3.2节组装初期的经验之谈,作者 [美]James Floyd Kelly,更多章节内容可以访问云栖社区"异步社区&q ...
C++实现简单的3D渲染【线性代数】
3dll 使用C++实现简单的3D渲染代码代码请见github代码仓库 https://github.com/gaowanlu/3dll 为什么写了它没学过计算机图形学.图像处理课程的菜鸡最近在 ...

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

前言

HTML部分源码

CSS部分源码

JS部分源码

【3D旋转墙】最简单的3d旋转墙相关推荐

最新文章

热门文章