html - CSS : Fix two corners with transform

Question

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

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

你可以试试这个:

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