vue旋转图片功能，旋转放大图片功能；vue旋转放大div元素

需求：可以旋转、放大、颠倒图片。

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>//旋转
          </span>
          <span @click="zuoyou('xingshizhengzhengben')">
            <i class="el-icon-right"></i>//右翻转
          </span>
          <span @click="shangxia('xingshizhengzhengben')">
            <i class="el-icon-top"></i>//左翻转
          </span>

data：

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

js

	chongzhi(elename) {
      this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1
      var 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 + 1
      var box = document.getElementById(elename);
      box.style.transform = 'rotateZ(' + 90 * this.xuanzhuanNumCar + 'deg)';
    },
    zuoyou(elename) {
      this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1
      var box = document.getElementById(elename);
      box.style.transform = 'rotateY(' + 180 * this.xuanzhuanNumCar + 'deg)';
    },
    shangxia(elename) {
      this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1
      var box = document.getElementById(elename);
      box.style.transform = 'rotateX(' + 180 * this.xuanzhuanNumCar + 'deg)';
    },