vue实现图片3D旋转效果
代码结构：（不是vue-cli搭建的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<link rel="stylesheet" href="./demo.css">
<script src="./js/vue.js"></script>
<body>
<div id="main" class="main" @mouseenter="mouseenter" @mouseleave="mouseleave" @click="click">
<div class="box" ref='box'>
<div v-for='(item,index) in 8' :key='index'>
<img class='img' :src="'img/'+ Number(index+1) +'.jpg'" @dblclick="imgClick(index)">
</div>
</div>
<div class="bigimg" v-if="isShow">
<div @click.stop="">
<img class='img' :src="'img/'+ Number(bigindex+1) +'.jpg'" @dblclick="bigImgClick">
</div>
</div>
</div>
</body>
<script src="./demo.js"></script>
</html>
css:
html,
body {
background-color: #000;
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
padding-top: 100px;
}
.box {
width: 133px;
height: 200px;
margin: 0px auto;
position: relative;
transform-style: preserve-3d;
transform: perspective(800px) rotateX(-15deg) rotateY(0deg);
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 3px;
box-shadow: 0px 0px 5px #fff;
-webkit-box-reflect: below 10px -webkit-linear-gradient(transparent, transparent 50%, rgba(0, 0, 0, .5));
}
.bigimg {
position: fixed;
left: 0;
top: 50px;
right: 0;
bottom: 0;
background-color: aquamarine;
width: 600px;
height: 800px;
margin: 0 auto;
}
.bigimg img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
js:
var app = new Vue({
el: '#main',
data: {
oWrap: '',
time: '',
roY: 0,
kg: true,
isShow: false,
bigindex: 0
},
mounted() {
this.gitList()
},
methods: {
gitList() {
//1.获取元素
let imgList = document.querySelectorAll('.img') //获取img数组
let deg = 360 / imgList.length; //3.每个需要旋转的度数
// 定义一个开始的度数
let roX = -10;
let roY = 0;
let x, y, x_, y_, xN, yN, time = null;
//2.遍历所有的img标签
for (let i = 0; i < imgList.length; i++) {
imgList[i].style.transform = 'rotateY(' + i * deg + 'deg) translateZ(350px)';
imgList[i].style.transition = ' all 1s ' + (imgList.length - i - 1) * 0.1 + 's';
//transition:设置过渡
imgList[i].ondragstart = function() {
return false;
}
}
},
//鼠标进入
mouseenter() {
clearInterval(this.time)
this.run()
},
//鼠标离开
mouseleave() {
clearInterval(this.time);
},
//点击停止（开始）
click() {
this.kg = !this.kg
if (this.kg) {
this.mouseenter()
} else {
this.mouseleave()
}
},
// 点击小图片
imgClick(index) {
this.isShow = true
this.bigindex = index
console.log(index);
},
// 点击大图片
bigImgClick() {
this.isShow = false
},
//封装计时器
run() {
let that = this
that.oWrap = that.$refs.box
that.time = setInterval(function() {
that.roY -= 5 * 0.2;
that.oWrap.style.transform = 'perspective(800px) rotateX(-10deg) rotateY(' + that.roY + 'deg)';
}, 100)
}
}
})
vue实现图片3D旋转效果相关推荐
- CSS图片3D旋转效果
页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- html如何图片立体自动旋转,html5如何实现图片的3D旋转效果
html5如何实现图片的3D旋转效果 发布时间:2020-12-01 09:54:40 来源:亿速云 阅读:192 作者:小新 小编给大家分享一下html5如何实现图片的3D旋转效果,希望大家阅读完这 ...
- Android做3D旋转动画,Android编程实现3D旋转效果实例
本文实例讲述了Android编程实现3D旋转效果的方法.分享给大家供大家参考,具体如下: 下面的示例是在Android中实现图片3D旋转的效果. 实现3D效果一般使用OpenGL,但在Android平 ...
- css3 立方体3d旋转效果
立方体3d旋转效果 通过上面的主题,我们就应该要知道今天我们需要那些东西来完成主题所说的立方体3d旋转特效. 我们需要立方体.旋转属性.动画这三个知识点. 第一步 我们要在网页中搭建立方体. (分析: ...
- 【CSS】记踩坑-图片3D旋转设置景深perspective
在练习CSS3图片3D旋转的时候,为了使图片更有旋转的立体效果,设置了景深,但发现图片的旋转角度发生了偏移. 设置景深之前: CSS <style>div{margin-top: 200p ...
- Qt简易实现图片立体旋转效果
前言 今年情人节刚好是过年期间,趁着过年有时间撸点代码,来个程序员的浪漫.去年七夕整了个抽奖的app,这次就整个有浪漫效果的程序就好了 经过在github上一番搜索,找到了一个相对满意的效果,这个效果 ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- vue 绑定图片相对路径
如上图所示,我们制作,tab切换功能,但是因为字体的原因,我们这里选择tab切换时,使用图片进行替换.但是 使用过程中发现一个问题,vue绑定图片"相对地址" 图片并不能展示出来. ...
- Android实现3D旋转效果
下面的示例是在Android中实现图片3D旋转的效果. 实现3D效果一般使用OpenGL,但在Android平台下可以不直接使用OpenGL,而是使用Camera实现,Camera中原理最终还是使用O ...
最新文章
- ATT与Intel汇编语言的比较
- mysql5.1 mysiam,将MySQL 5.1 MyISAM 转换成 INNODB 存储引擎
- 在SQL Server中创建用户角色及授权
- Android的手势的保存
- tasker使用手册_如何开始使用Tasker调整Android手机
- python 句子中没有中文_人生感悟经典句子，生活中可以没有诗歌，但不能没有诗意...
- 高质量C /C编程指南---附录B ：C /C试题和答案
- python 自动打开登陆应用编码_Python+tkinter模拟“记住我”自动登录实例代码
- [译]PEP 342--增强型生成器：协程
- js页面跳转并传值问题
- STM8S003F3P6采集DS18B20数码管显示 串口通讯
- 偶极子阵列天线（带反射板）+单层天线罩
- 怎么用计算机直接截图,电脑怎样截图又快又方便 1分钟教你如何快速截图
- [关系图谱] 一.Gephi通过共现矩阵构建知网作者关系图谱
- 苹果手机html5定位,苹果手机常去地点可以记录多长时间？
- 《测绘综合能力》真题易错本
- Oracle EBS Interface/API(13)-MRP Forcast 创建预测名称和预测物料导入
- 在PrimeFaces中更改主题
- ESP8266 上电 boot 模式
- 【ISP】HSV（2）