Html CSS：使用transform修复两个角

我正在尝试在菜单上创建悬停动画。我在悬停时使用“变换”。 我有一个问题，我想修复我的div的左上角和右上角。我不想在转换过程中被移动。 我想要的效果是开箱效果。 现在，我很快就会有效果了。我只需要修复顶角，并在悬停结束时使阴影平滑消失。 你能帮我吗

[class*=“col-”]{
宽度：100%；
}
@仅介质屏幕和（最小宽度：600px）{
/*对于平板电脑：*/
.col-m-1{宽度：8.33%；}
.col-m-2{宽度：16.66%；}
.col-m-3{宽度：25%；}
.col-m-4{宽度：33.33%；}
.col-m-5{宽度：41.66%；}
.col-m-6{宽度：50%；}
.col-m-7{宽度：58.33%；}
.col-m-8{宽度：66.66%；}
.col-m-9{宽度：75%；}
.col-m-10{宽度：83.33%；}
.col-m-11{宽度：91.66%；}
.col-m-12{宽度：100%；}
}
@仅介质屏幕和（最小宽度：768px）{
/*对于桌面：*/
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}
}
[类别*=“列-”]{
浮动：左；
}
.行：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
/*导航*/
menuPrincipal先生{
文本对齐：居中；
位置：固定；
宽度：100%；
}
menuPrincipal先生{
保证金：0；
填充：0；
背景：var（--菜单边框颜色）；
}
.activeLink{
颜色：黄色；
}
menuPrincipal ul li a.先生{
显示：块；
颜色：白色；
转变：转变；
文本对齐：居中；
}
menuPrincipal ul li a分区{
左边框样式：实心；
右边框样式：实心；
边框颜色：var（--菜单边框颜色）；
边框宽度：2倍；
背景：var（--菜单颜色）；
高度：3em；
位置：相对位置；
文本对齐：居中；
}
menuPrincipal ul li a部门p{
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
保证金权利：-50%；
转换：翻译（-50%，-50%）；
}
李孟普先生{
列表样式类型：无；
显示：内联；
}
menuPrincipal ul li a:悬停{
z指数：1；
显示：块；
颜色：白色；
文本对齐：居中；
/*变换原点：0-100%；
变换：透视（1000px）旋转（-20度）旋转（40度）*/
变换：skewX（-25度）translateX（-4%）translateY（10%）scaleY（1.2）；
盒影：10px 10px 30px#303030；
}

您可以试试这个：

.menuPrincipal ul li a:hover {
    z-index: 1;
    display: block;
    color: white;
    text-align: center;
    transform: skewX(-25deg) translateX(-11px) translateY(10%) scaleY(1.2);
    box-shadow: 10px 10px 30px #303030;
}

---

您可以试试这个：

.menuPrincipal ul li a:hover {
    z-index: 1;
    display: block;
    color: white;
    text-align: center;
    transform: skewX(-25deg) translateX(-11px) translateY(10%) scaleY(1.2);
    box-shadow: 10px 10px 30px #303030;
}

---

我的回答和解释

当您使用CSS转换DOM元素时，您应该注意转换完成后元素的移动/定位。正如Md.Abu Sayed所说，您必须反转或阻止已转换元素的移动，以保持元素的位置

唯一的问题是，这是问题答案的一半，因为您要求我们在

：hover

事件完成时，还包括

框阴影的平滑过渡

我已经更新了您的代码，添加了Md.Abu Sayed的补丁，并在
：hover
上的列表项内的超链接的
框阴影
上添加了
转换
。我还看到
.activeLink
类的样式没有显示，因此我移动并更新了该类的选择，以使样式正常工作

请注意，我只在中包含CSS代码，因为这是我对您问题的回答。有关完整的工作示例，请参见my

总体解决方案


.menuPrincipal{
位置：固定；
宽度：100%；
文本对齐：居中；
}
menuPrincipal先生{
保证金：0；
填充：0；
背景：var（--菜单边框颜色）；
}
李孟普先生{
位置：相对位置；
z指数：1；
显示：内联；
列表样式类型：无；
}
menuPrincipal ul li：悬停{
显示：块；
z指数：2；
颜色：白色；
文本对齐：居中；
}
menuPrincipal ul li a.先生{
显示：块；
背景：var（--菜单颜色）；
颜色：白色；
文本对齐：居中；
变换：变换0.2s，框影0.2s；
}
.activeLink、.menuPrincipal ul li a.activeLink{
颜色：黄色；
}
menuPrincipal ul li:将鼠标悬停在a上{
盒影：10px 10px 30px#303030；
变换：skewX（-25度）translateX（-11像素）translateY（10%）scaleY（1.2）；
变换：变换0.2s，盒影0.4s；
}
menuPrincipal ul li a分区{
位置：相对位置；
高度：3em；
左边框样式：实心；
右边框样式：实心；
边框颜色：var（--菜单边框颜色）；
边框宽度：2倍；
文本对齐：居中；
}
menuPrincipal ul li a部门p{
位置：绝对位置；
最高：50%；
左：50%；
保证金：0；
保证金权利：-50%；
转换：翻译（-50%，-50%）；
}
我的回答和解释

当您使用CSS转换DOM元素时，您应该注意转换完成后元素的移动/定位。正如Md.Abu Sayed所说，您必须反转或阻止已转换元素的移动，以保持元素的位置

唯一的问题是，这是问题答案的一半，因为您要求我们在
：hover
事件完成时，还包括
框阴影的平滑过渡

我已经更新了您的代码，添加了Md.Abu Sayed的补丁，并在
：h的列表项内的超链接的
框阴影中添加了
转换