Javascript 如何在图片悬停时在CSS中创建分离动画？

我有下面的图片，我想动画从左上角到右下角的标志线切割对角线分裂如下所示。动画将在X轴上将图片分割为几个像素

到目前为止，我已经取得了一些进展，我使用了相同的图片两次，并将它们相互重叠，并在X轴上倾斜。但是，这会将图片从右上到左下分开。我喜欢另一种方式，但我无法理解

我也不知道如何将鼠标悬停在整个图片上，以便在两侧执行动画

body{背景：gainsboro；}
.pageOption{
溢出：隐藏；
位置：相对位置；
保证金：0自动；
宽40em，高27em；
}
.option.option img{宽度：100%；高度：100%；}
.选择权{
溢出：隐藏；
位置：绝对位置；
/*弧坦（27/40）=34.01935度
*需要倾斜90度-34.01935度=55.98065度
*/
变换：skewX（-55.98度）；
}
.选择：第一个孩子{
左：-.25em；
变换原点：100%0；
}
.选项：最后一个孩子{
右：-.25em；
变换原点：0.100%；
}
.option img，.option:after{
变换：skewX（55.98度）；
转换原点：继承；
}
.选项：悬停{
左：-.8em；
过渡：1s；
}

<代码> > p>你可以考虑剪辑路径，就像下面这样做。诀窍是使用两个相反的多边形，组合将形成完整的图像


.image{
宽度：340px；
高度：230像素；
背景图片：url(https://i.ibb.co/fDzZ6Sc/Logo.png);
背景大小：0；
位置：相对位置；
}
.图片：之前，
.图片：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景图像：继承；
背景尺寸：封面；
过渡：1s；
}
.图片：之前{
剪辑路径：多边形（0,15%0,97%100,0,100%）；
}
.图片：之后{
剪辑路径：多边形（100%0,15%0,97%100%）；
}
.image:hover:：before{
转换：转换（-20px，-10px）；
}
.image:hover:：after{
转换：转换（20px，10px）；
}
身体{
背景：粉红色；
}

“但是这会将图片从右上到左下分开。”-反转倾斜度上的符号，看看会发生什么。“我也不知道如何将鼠标悬停在整张图片上，以便动画在两侧执行。”-您可以根据第一个链接当前悬停的情况对第二个链接进行不同的格式设置，但不能反过来设置。请改用父元素的悬停状态。非常感谢。我将研究多边形是如何工作的，以了解这一点。这是一种非常酷的做事方式@SamRaha它们很简单，你只需要想象这些点以及它们之间的联系。这里有一个很好的工具可以帮助你：谢谢你的帮助，先生。您是否知道如何禁用IE的“transform:translate”，因为它不受支持。我试过-ms转换：没有！重要的；在悬停状态下，但不起作用。@SamRaha translate在IE中受支持，但剪辑路径不受支持