需求：可以旋轉(zhuǎn)、放大、顛倒圖片。

html:

<div class="imgtop"><img class="imgboxele" id="xingshizhengzhengben" :src="imgurl" alt=""></div><div class="imgtxt">行駛證正本</div><span @click="chongzhi('xingshizhengzhengben')"><i class="el-icon-refresh"></i>//重置</span><span @click="xuanzhuan('xingshizhengzhengben')"><i class="el-icon-refresh-right"></i>//旋轉(zhuǎn)</span><span @click="zuoyou('xingshizhengzhengben')"><i class="el-icon-right"></i>//右翻轉(zhuǎn)</span><span @click="shangxia('xingshizhengzhengben')"><i class="el-icon-top"></i>//左翻轉(zhuǎn)</span>

data：

xuanzhuanNumCar: 0, imgurl：'',//圖片的地址

js

chongzhi(elename) {this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1var box = document.getElementById(elename);box.style.transform = 'rotateZ(' + 0 + 'deg)';box.style.transform = 'rotateX(' + 0 + 'deg)';box.style.transform = 'rotateY(' + 0 + 'deg)';},xuanzhuan(elename) {this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1var box = document.getElementById(elename);box.style.transform = 'rotateZ(' + 90 * this.xuanzhuanNumCar + 'deg)';},zuoyou(elename) {this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1var box = document.getElementById(elename);box.style.transform = 'rotateY(' + 180 * this.xuanzhuanNumCar + 'deg)';},shangxia(elename) {this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1var box = document.getElementById(elename);box.style.transform = 'rotateX(' + 180 * this.xuanzhuanNumCar + 'deg)';}, 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vue旋转图片功能，旋转放大图片功能；vue旋转放大div元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。