如何用代码实现抖音的图片旋转
文章目录
- 我也来跟个分
- 话不多说直接上效果
一、效果图
我因为没有对象,所以用的是我和我姐的而且照片不多所以效果不是特别明显,当然可以直接鼠标拖动,话不多说直接上
1.视频效果
这是视频效果
二、代码部分
1.样式代码
代码如下(示例):
/* 去掉默认效果 */* {margin: 0;padding: 0;}body {background: #222;overflow: hidden;/* 取消选中 */user-select: none;}@keyframes rotate {100% {transform: rotateY(360deg);}}.perspective {/*子元素透视 场景深度*/perspective: 600px;}.wrap {/* 3d */width: 135px;height: 240px;margin: 100px auto;position: relative;/* border: 1px solid red; */transform: rotateX(-20deg) rotateY(0deg);transform-style: preserve-3d;}.wrap img {display: block;/* 绝对定位 */position: absolute;width: 100%;height: 100%;transform: rotateY(0deg) translateZ(0px);background: transparent;box-shadow: 0 0 4px #fff;border-radius: 5px;/* webkit */}/* 照片底座 */.wrap p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));position: absolute;border-radius: 50%;left: 50%;top: 100%;margin-left: -600px;margin-top: -600px;/* 沿着x轴按倒 */transform: rotateX(90deg);}
2.布局代码
<!-- 盒子容器 --><div class="perspective"><div class="wrap" id="imgwrap"><!-- 引入图片值页面 --><img class="f1" src="img/12.jpg" /><img class="f1" src="img/13.jpg" /><img class="f1" src="img/14.jpg" /><img class="f1" src="img/15.jpg" /><img class="f1" src="img/16.jpg" /><img class="f1" src="img/1.jpg" /><img class="f1" src="img/2.jpg" /><img class="f1" src="img/3.jpg" /><img class="f1" src="img/4.jpg" /><img class="f1" src="img/5.jpg" /><img class="f1" src="img/6.jpg" /><img class="f1" src="img/7.jpg" /><img class="f1" src="img/5.jpg" /><img class="f1" src="img/6.jpg" /><img class="f1" src="img/7.jpg" /><img class="f1" src="img/8.jpg" /><img class="f1" src="img/9.jpg" /><img class="f1" src="img/10.jpg" /><img class="f1" src="img/11.jpg" /><img class="f1" src="img/17.jpg" /><img class="f1" src="img/18.jpg" /><img class="f1" src="img/19.jpg" /><img class="f1" src="img/20.jpg" /><img class="f1" src="img/21.jpg" /><img class="f1" src="img/22.jpg" /><img class="f1" src="img/23.jpg" /><img class="f1" src="img/24.jpg" /><img class="f1" src="img/25.jpg" /><img class="f1" src="img/26.jpg" /><img class="f1" src="img/27.jpg" /><img class="f1" src="img/28.jpg" /><img class="f1" src="img/29.jpg" /><img class="f1" src="img/30.jpg" /><!-- 引入图片值页面 --><img class="f2" src="img/1.jpg" /><img class="f2" src="img/2.jpg" /><img class="f2" src="img/3.jpg" /><img class="f2" src="img/4.jpg" /><img class="f2" src="img/5.jpg" /><img class="f2" src="img/9.jpg" /><img class="f2" src="img/10.jpg" /><img class="f2" src="img/11.jpg" /><img class="f2" src="img/12.jpg" /><img class="f2" src="img/25.jpg" /><img class="f2" src="img/26.jpg" /><img class="f2" src="img/27.jpg" /><img class="f2" src="img/28.jpg" /><img class="f2" src="img/29.jpg" /><img class="f2" src="img/30.jpg" /><img class="f2" src="img/13.jpg" /><img class="f2" src="img/14.jpg" /><img class="f2" src="img/15.jpg" /><img class="f2" src="img/16.jpg" /><img class="f2" src="img/17.jpg" /><img class="f2" src="img/18.jpg" /><img class="f2" src="img/19.jpg" /><img class="f2" src="img/20.jpg" /><img class="f2" src="img/21.jpg" /><img class="f2" src="img/22.jpg" /><img class="f2" src="img/23.jpg" /><img class="f2" src="img/24.jpg" /><img class="f2" src="img/6.jpg" /><img class="f2" src="img/7.jpg" /><img class="f2" src="img/5.jpg" /><img class="f2" src="img/6.jpg" /><img class="f2" src="img/7.jpg" /><img class="f2" src="img/8.jpg" /><!-- 引入图片值页面 --><img class="f3" src="img/1.jpg" /><img class="f3" src="img/2.jpg" /><img class="f3" src="img/11.jpg" /><img class="f3" src="img/12.jpg" /><img class="f3" src="img/25.jpg" /><img class="f3" src="img/26.jpg" /><img class="f3" src="img/27.jpg" /><img class="f3" src="img/3.jpg" /><img class="f3" src="img/4.jpg" /><img class="f3" src="img/5.jpg" /><img class="f3" src="img/16.jpg" /><img class="f3" src="img/17.jpg" /><img class="f3" src="img/18.jpg" /><img class="f3" src="img/10.jpg" /><img class="f3" src="img/28.jpg" /><img class="f3" src="img/29.jpg" /><img class="f3" src="img/30.jpg" /><img class="f3" src="img/13.jpg" /><img class="f3" src="img/19.jpg" /><img class="f3" src="img/20.jpg" /><img class="f3" src="img/21.jpg" /><img class="f3" src="img/22.jpg" /><img class="f3" src="img/23.jpg" /><img class="f3" src="img/24.jpg" /><img class="f3" src="img/9.jpg" /><img class="f3" src="img/14.jpg" /><img class="f3" src="img/15.jpg" /><img class="f3" src="img/6.jpg" /><img class="f3" src="img/7.jpg" /><img class="f3" src="img/5.jpg" /><img class="f3" src="img/6.jpg" /><img class="f3" src="img/7.jpg" /><img class="f3" src="img/8.jpg" /><p></p></div></div>
3.JavaScript部分
<!-- src="JS/photo.js" --><script type="text/javascript">var oImg = document.getElementsByClassName('f1')var oImg2 = document.getElementsByClassName('f2')var oImg3 = document.getElementsByClassName('f3')var len = oImg.length;console.log(len)var deg = 360 / len;var oWrap = document.getElementById("imgwrap");// var oWrap=document.querySelector('.wrap');//页面加载完毕在执行的代码window.onload = function () {Array.prototype.forEach.call(oImg, function (ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg2, function (ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg3, function (ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});// Array.prototype.forEach.call(oImg, function (ele, index, self) {// // 旋转并沿Z轴平移// ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";// //过渡时间1s// ele.style.transition = "1s " + (len - index) * 0.1 + "s";// });}//翻动3D相册var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;document.onmousedown = function (e) {// 点击设置初值lastX = e.clientX;lastY = e.clientY;this.onmousemove = function (e) {newX = e.clientX;newY = e.clientY;minusX = newX - lastX;minusY = newY - lastY;rotX -= minusY * 0.2;rotY += minusX * 0.1;oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";lastX = newX;lastY = newY;}this.onmouseup = function (e) {//鼠标松开this.onmousemove = null;//清除鼠标移动}}</script>
总结
这里给大家上源码永久有效 喜欢的可以自己下载
链接:https://pan.baidu.com/s/1xQSULlYQ3CvnU95lbXXDaQ
提取码:jgqq
解压里面img文件夹自己上图片就可以了要一个要求就是图片要以1-30且为jpg格式,1.jpg-30.jpg当然不喜欢的也可以直接改。
喜欢的话给我点个赞吧,谢谢各位大佬
如何用代码实现抖音的图片旋转相关推荐
- 拼出爱心图案的c语言,抖音爱心图片拼图9格照片怎么弄 高格调拼图已被霸屏
最近抖音上有一种高格调的爱心拼图很火,那么抖音爱心图片拼图9格照片怎么弄呢?其实就是先用拼图,之后在留有空白的地方,就能拼出爱心的拼图了,不过就是制作起来比较麻烦,但是网友也是表示,既然玩抖音总是要学 ...
- n行Python代码系列:两行代码去除抖音快手短视频尾部Logo
☞ ░ 老猿Python博文目录:https://blog.csdn.net/LaoYuanPython ░ 一.引言 最近看到好几篇类似"n行Python代码-"的博文,看起来还 ...
- 陈赫头像java_陈赫大军头像下载-陈赫抖音头像图片大全 _5577安卓网
陈赫抖音头像图片大全分享给大家,这是目前在抖音上继过山车组织头像爆火之后,陈赫大军头像也突然火爆起来,非常搞笑的表情可随意制作表情包,喜欢的朋友们千万不要错过哦! [抖音陈赫头像是什么梗] 这两天刷抖 ...
- 火遍抖音的3D旋转特效
火遍抖音的3D旋转特效代码前端代码实现: 3d旋转特效.html 0000644 0000764 0000765 00000015444 13577153703 014745 0 ustar www ...
- 【Python成长之路】如何用2行代码将抖音视频设置成我的手机铃声
哈喽大家好,我是鹏哥. 今天想学习记录的内容是 -- 如何用python提取视频中的音频. ~~~上课铃~~~ 1 写在前面 本来按我的性子和精力,一周一般只想写一篇博客:但是今天在刷抖音时,发现有个 ...
- python时钟罗盘酷炫代码_抖音上的时钟屏保,被我改造完用来表白
作者:爱编程的小和尚 原文链接:https://blog.csdn.net/Newbie___/article/details/105378852 抖音上很火的时钟屏保,被我改造完后用来准备准备准备表 ...
- 抖音上的python课程_如何用Python抓抖音上的小姐姐
爬虫的案例我们已讲得太多.不过几乎都是 网页爬虫 .即使有些手机才能访问的网站,我们也可以通过 Chrome 开发者工具 的 手机模拟 功能来访问,以便于分析请求并抓取.(比如 3分钟破译朋友圈测试小 ...
- 仿抖音--将图片转化成对应的字符图片
起初看到抖音上的那个将图片转化成对应的字符图片的视频,心动不已,哇!这哥们也太有心了吧,虽说莉哥好看,但你做这图要花多长时间呀!值不值啊! 后来我才知道,java实现的话简直一秒钟的事. 第一开始只能 ...
- 抖音上学python靠谱吗_如何用Python抓抖音上的小姐姐
爬虫的案例我们已讲得太多.不过几乎都是 网页爬虫 .即使有些手机才能访问的网站,我们也可以通过 Chrome 开发者工具 的 手机模拟 功能来访问,以便于分析请求并抓取.(比如 3分钟破译朋友圈测试小 ...
最新文章
- ARP协议的报文格式
- 3.CSS布局奇淫巧计之-强大的负边距【转】
- HTML基础之CSS
- fz响应无法连接到服务器,fz链接不到服务器
- java并行体系结构
- 串口接收标志位语句_如何获取串口的发送和接收的标志位?
- Linux系统中CPU使用率查询常用的5个命令
- Python中[::-1]的意义
- 小程序 const moment = require('moment')_C++大作业-XXX管理程序
- (100)FPGA单沿和双沿采样(下降沿采样)
- Solrj 存储一个point类型的字段
- java 中反射的使用_java中反射的基本使用
- sql 同一张表中两个记录不能共存_如何分析交易记录?
- python无法使用decode,Python处理文件名或路径名中无法decode代码问题
- VBS教程-wscript对象
- Android开发自定义View之滑动按钮与自定义属性
- 生物聚集细胞生物化学反应的组织者Biomolecular condensates: organizers of cellular biochemistry
- 新浪云sae 部署 thinkphp5
- 李宏毅机器学习——循环神经网络(一)
- matlab去eog,使用ICA去除32通道脑电数据中的眼电
热门文章
- 错过的二十年后:香港的科技败局和AI未来
- Tornado 实践:基于 Peewee、Marshmallow、Aioredis 实现用户登录注册接口
- 2017-我的秋招之路:机器学习/算法工程师(含大量面经)
- HTML5网站大观:精美的 HTML5 商业网站设计案例
- 服务器怎么修改字体,云服务器怎么修改字体
- c++海盗战争1.0正式版【免费复制】
- CobaltStrike上线Linux主机(CrossC2)
- linux需要的GLIBCXX版本,linux系统下的缺失 libstdc++.so.6: version’GLIBCXX_3.4.20’的问题:...
- 读书笔记-MongoDb-简介
- 计算机考研难度2017,2017大专生考研难度分析