CSS：用变换修复两个角

Question

我正在尝试在菜单上创建悬停动画。我在悬停时使用“transform”。我有一个问题，我想修复我的div的左上角和右下角。我不想在变换过程中移动。我想要的效果是打开盒子效果。现在，我已经接近了效果。我只需要修复顶角，并在悬停完成时使阴影消失。你可以帮帮我吗 ？

https://jsfiddle.net/Goby03/28fpk45h/

[class*="col-"] {
   width: 100%;
}
@media only screen and (min-width: 600px) {
   /* For tablets: */
   .col-m-1 {width: 8.33%;}
   .col-m-2 {width: 16.66%;}
   .col-m-3 {width: 25%;}
   .col-m-4 {width: 33.33%;}
   .col-m-5 {width: 41.66%;}
   .col-m-6 {width: 50%;}
   .col-m-7 {width: 58.33%;}
   .col-m-8 {width: 66.66%;}
   .col-m-9 {width: 75%;}
   .col-m-10 {width: 83.33%;}
   .col-m-11 {width: 91.66%;}
   .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
   /* For desktop: */
   .col-1 {width: 8.33%;}
   .col-2 {width: 16.66%;}
   .col-3 {width: 25%;}
   .col-4 {width: 33.33%;}
   .col-5 {width: 41.66%;}
   .col-6 {width: 50%;}
   .col-7 {width: 58.33%;}
   .col-8 {width: 66.66%;}
   .col-9 {width: 75%;}
   .col-10 {width: 83.33%;}
   .col-11 {width: 91.66%;}
   .col-12 {width: 100%;}
}

[class*="col-"] {
    float: left;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

/*nav*/


.menuPrincipal {
  text-align: center;
  position: fixed;
  width : 100%;
}

.menuPrincipal ul {
  margin: 0;
  padding: 0;
  background: var(--menu-border-color);
}

.activeLink {
  color: yellow;
}

.menuPrincipal ul li a {
  display: block;
  color : white;
  transition: transform ease 2s;
  text-align: center;
}

.menuPrincipal ul li a div {
  border-left-style: solid;
  border-right-style: solid;
  border-color: var(--menu-border-color);
  border-width: 2px;
  background: var(--menu-color);
  height : 3em;
  position: relative;
  text-align: center;
}

.menuPrincipal ul li a div p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.menuPrincipal ul li {
  list-style-type: none;
  display: inline;
}



.menuPrincipal ul li a:hover {
  z-index: 1;
  display: block;
  color : white;
  text-align: center;
  /*transform-origin:  0 -100% ;
  transform: perspective(1000px) rotateY(-20deg) rotateX(40deg);*/
  transform: skewX(-25deg) translateX(-4%) translateY(10%) scaleY(1.2);
  box-shadow: 10px 10px 30px #303030;
}

<nav class="menuPrincipal row">
      <ul class="row">
        <li class="col-m-2">
          <a href="#" class="activeLink"><div class="activeDiv"><p>Accueil</p></div></a> 
        </li>
        <li class="col-m-2">
          <a href="#"><div><p>Bonnes pratiques de l'UX</p></div></a> 
        </li>
        <li class="col-m-2">
          <a href="#"><div><p>Nos domaines d'expertises</p></div></a> 
        </li>
        <li class="col-m-2">
          <a href="#"><div><p>Formation</p></div></a> 
        </li>
        <li class="col-m-2">
          <a href="#"><div><p>L'équipe</p></div></a> 
        </li>
        <li class="col-m-2">
          <a href="#"><div><p>Contact</p></div></a> 
        </li>
      </ul>

    </nav>

Answer 1

我的回答和解释

当您使用CSS转换DOM元素时，您应该在转换完成后关注元素的移动/定位。正如Md.Abu Sayed所说，你必须扭转或阻止变形元素的移动以保持元素到位。

唯一的问题是，这是问题答案的一半，因为你要求我们在transition事件完成时包括box-shadow的光滑:hover。

我已经更新了你的代码，包括Md.Abu Sayed的修复，并在transition列表项目内的超链接的box-shadow上添加了:hover。我还看到.activeLink类的样式没有显示，所以我已经移动并更新了这个类的选择以使样式工作。

请注意，我只包含了CSS代码，因为这是我对您的问题的回答。请参阅我的jsFiddle example以获取完整的工作示例。

总Solutine

.menuPrincipal {
  position: fixed;
  width : 100%;
  text-align: center;
}

.menuPrincipal ul {
  margin: 0;
  padding: 0;
  background: var(--menu-border-color);
}

.menuPrincipal ul li {
  position: relative;
  z-index: 1;
  display: inline;
  list-style-type: none;
}

.menuPrincipal ul li:hover {
  display: block;
  z-index: 2;
  color: white;
  text-align: center;
}

.menuPrincipal ul li a {
  display: block;
  background: var(--menu-color);
  color: white;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.activeLink, .menuPrincipal ul li a.activeLink {
  color: yellow;
}

.menuPrincipal ul li:hover a {
  box-shadow: 10px 10px 30px #303030;
  transform: skewX(-25deg) translateX(-11px) translateY(10%) scaleY(1.2);
  transition: transform 0.2s, box-shadow 0.4s;
}

.menuPrincipal ul li a div {
  position: relative;
  height : 3em;
  border-left-style: solid;
  border-right-style: solid;
  border-color: var(--menu-border-color);
  border-width: 2px;
  text-align: center;
}

.menuPrincipal ul li a div p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

Answer 2

你可以试试这个：

.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;
}