Javascript 全背景图像鼠标移动覆盖率

我有一个小脚本，可以在鼠标移动时倾斜背景图像。我已经尝试了3种不同的图像，无论它们的大小，当图像移动时都会有一个白色的间隙

背景图像跟随鼠标，没有问题。只是显示白色的间隙，我试着在每一个设置图像什么都没有用

$（函数（）{
//初始化
var container=document.getElementById（“容器”），
内部=document.getElementById（“内部”）；
//老鼠
变量鼠标={
_x:0,，
_y:0，
x:0,，
y:0，
updatePosition:函数（事件）{
var e=事件| | window.event；
this.x=e.clientX-this.\u x；
this.y=（e.clientY-this._y）*-1；
},
setOrigin:函数（e）{
此._x=e.offsetLeft+数学楼层（e.offsetWidth/2）；
这个._y=e.offsetTop+Math.floor（e.offsetHeight/2）；
},
show:function（）{
返回“（“+this.x+”，“+this.y+”）”；
}
};
//跟踪鼠标相对于容器中心的位置。
鼠标.setOrigin（容器）；
//-----------------------------------------
var计数器=0；
var updateRate=10；
var=update=function（）{
返回计数器+++%updateRate===0；
};
//-----------------------------------------
var onMouseEnterHandler=函数（事件）{
更新（事件）；
};
var onMouseLeaveHandler=函数（）{
internal.style=“”；
};
var onMouseMoveHandler=函数（事件）{
如果（更新（））{
更新（事件）；
}
};
//-----------------------------------------
变量更新=函数（事件）{
鼠标。更新位置（事件）；
updateTransformStyle(
（mouse.y/internal.offsetHeight/2）.toFixed（2），
（mouse.x/inner.offsetWidth/2）.toFixed（2）
);
};
var updateTransformStyle=函数（x，y）{
var style=“rotateX（“+x+”度）rotateY（“+y+”度）”；
inner.style.transform=样式；
internal.style.webkitttransform=样式；
inner.style.mozTransform=样式；
internal.style.msTransform=样式；
inner.style.oTransform=样式；
};
//-----------------------------------------
container.onmouseinter=onmouseinterhandler；
container.onmouseleave=onMouseLeaveHandler；
container.onmousemove=onMouseMoveHandler；
});
正文{
字体系列：Arial，'Helvetica Neue'，Helvetica，无衬线；
颜色：#333；
字体大小：14px；
线高：20px；
}
.集装箱{
位置：相对位置；
溢出：隐藏；
-webkit透视图：50px；
透视图：50px；
}
.内部{
位置：静态；
显示：块；
宽度：100%；
高度：100vh；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
背景图像：url（'https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
背景位置：50%50%；
背景尺寸：封面；
背景重复：无重复；
背景附件：固定；
}
调整背景图片的大小没有帮助。这些间隙是由
div.inner
的旋转方式造成的。下面是一个简单的图形说明：


可能的解决办法：

旋转时缩放div。您需要按
（1/cos（旋转角度））
进行缩放。但这不是一个很好的方法。它看起来不够好看

根据可能的最大旋转角度，缩放内部分区一次。不要忘了将其移动到所需的位置，并带有负边距或
位置：绝对值

下面是一个基于您的代码的工作原理示例。注意，这不是完整的工作代码，我只是修改了宽度和边距。为了得到你想要的东西，你需要自己设置比例和定位


$（函数（）{
//初始化
var container=document.getElementById（“容器”），
内部=document.getElementById（“内部”）；
//老鼠
变量鼠标={
_x:0,，
_y:0，
x:0,，
y:0，
updatePosition:函数（事件）{
var e=事件| | window.event；
this.x=e.clientX-this.\u x；
this.y=（e.clientY-this._y）*-1；
},
setOrigin:函数（e）{
此._x=e.offsetLeft+数学楼层（e.offsetWidth/2）；
这个._y=e.offsetTop+Math.floor（e.offsetHeight/2）；
},
show:function（）{
返回“（“+this.x+”，“+this.y+”）”；
}
};
//跟踪鼠标相对于容器中心的位置。
鼠标.setOrigin（容器）；
//-----------------------------------------
var计数器=0；
var updateRate=10；
var=update=function（）{
返回计数器+++%updateRate===0；
};
//-----------------------------------------
var onMouseEnterHandler=函数（事件）{
更新（事件）；
};
var onMouseLeaveHandler=函数（）{
internal.style=“”；
};
var onMouseMoveHandler=函数（事件）{
如果（更新（））{
更新（事件）；
}
};
//-----------------------------------------
变量更新=函数（事件）{
鼠标。更新位置（事件）；
updateTransformStyle(
（mouse.y/internal.offsetHeight/2）.toFixed（2），
（mouse.x/inner.offsetWidth/2）.toFixed（2）
);
};
var updateTransformStyle=函数（x，y）{
var style=“rotateX（“+x+”度）rotateY（“+y+”度）”；
inner.style.transform=样式；
internal.style.webkitttransform=样式；
inner.style.mozTransform=样式；
internal.style.msTransform=样式；
inner.style.oTransform=样式；
};
//-----------------------------------------
container.onmouseinter=onmouseinterhandler；
container.onmouseleave=onMouseLeaveHandler；
container.onmousemove=onMouseMoveHandler；
});
正文{
字体系列：Arial，