微信小程序实现图片随手机晃动而晃动

<view class="container">
        <image class="img" 
        style="transform: rotate3d(0, 1, 0, {{x}}deg)"
        src="../../demo.jpg"></image>
</view>

page{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  perspective: 500px;
}
.demo{
  width: 500rpx;
  height: 500rpx;
  box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0);
  position: relative;
}
.img{
  height: 880rpx;
  width: 500rpx;
  position: relative;
  box-shadow: 0rpx 0rpx 20rpx #000000;
  /* animation: hd infinite 2s; */
  /* animation: lf 2s; */
  /* transform: translate3d(5%, 0, 0) rotate3d(0, 1, 0, 4deg); */
}
@keyframes hd{
  form{
    transform: none;
  }
  35% {
    transform: translate3d(0%, 0, 0) rotate3d(1, 0, 0, 4deg);
  }
  65% {
    transform: translate3d(0%, 0, 0) rotate3d(1, 0, 0, -4deg);
  }
  to {
    transform: none;
  }
}
@keyframes lf{
  form{
    transform: none;
  }
  to {
    transform: translate3d(5%, 0, 0) rotate3d(0, 1, 0, 4deg);
  }
}
@keyframes rf{
  form{
    transform: none;
  }
  to {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 1, 0, -4deg);
  }
}

/**
   * 页面的初始数据
   */
  data: {
    x:0,
    y:0
  },
  demo(){
    let self = this;
    // 陀螺仪
    // wx.startGyroscope({
    //   interval: 'interval',
    //   success(data){
    //     console.log(data)
    //   },
    //   fail(err){
    //     console.log(err)
    //   }
    // });
    // wx.onGyroscopeChange((result) => {
    //   console.log('陀螺仪：',-(result.y * 100).toFixed(2))// 测转动的速度值。而不是角度值。速度越大，值越大。速度为0，值为0；
    //   var xVal = -(result.y * 100).toFixed(2);
    //   var yVal = (result.x * 100).toFixed(2);
    //   self.setData({
    //     x: xVal > 40 ? 40 : (xVal < -40 ? -40 : xVal),
    //     y: yVal > 40 ? 40 : (yVal < -40 ? -40 : yVal),
    //   })
    // })

    // 设备方向
    wx.startDeviceMotionListening({
      interval: 'ui',
    });
    wx.onDeviceMotionChange((result) => {
      console.log('设备方向：',result);//alpha,beta,gamma
      var xVal = -(result.gamma).toFixed(2)/5;
      var yVal = -(result.beta - 30).toFixed(2)/5;
      self.setData({
        x: xVal > 10 ? 10 : (xVal < -10 ? -10 : xVal),
        y: yVal > 10 ? 10 : (yVal < -10 ? -10 : yVal),
      })
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.demo()
  },