css transform rotate 不影响子元素

直接获取不到rotate角度

console.log($("#mapid" + element).parent("div").css("transform"));

输出为

解决方法：

var nowDeg=0;
if($("#mapid" + element).parent("div").css("transform")!='none'){
 	var values = $("#mapid" + element).parent("div").css("transform").split("(")[1].split(")")[0].split(",");
    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];
    nowDeg = this.getmatrix(a, b, c, d);

将matrix转换为角度的方法

getmatrix(a, b, c, d) {
      var aa = Math.round((180 * Math.asin(a)) / Math.PI);
      var bb = Math.round((180 * Math.acos(b)) / Math.PI);
      var cc = Math.round((180 * Math.asin(c)) / Math.PI);
      var dd = Math.round((180 * Math.acos(d)) / Math.PI);
      var deg = 0;
      if (aa == bb || -aa == bb) {
        deg = dd;
      } else if (-aa + bb == 180) {
        deg = 180 + cc;
      } else if (aa + bb == 180) {
        deg = 360 - cc || 360 - dd;
      }
      return deg >= 360 ? 0 : deg;
    },

在子元素中用负的角度抵消旋转的角度

$("#mapid" + element).parent("div").append("<img src='" +require("@/assets/images/gong.png") + "' style='position:absolute;left:0px;right:0px;width:20px;height:20px;top:0;bottom:0;margin: auto;margin-left: auto;margin-right: auto;transform:rotate(-"+nowDeg+"deg);'/>");