::使用css转换悬停后，在转换时会为我的li添加宽度

Question

我有一个社交图标列表，将其悬停在CSS变换上即可产生“立方体3D效果”。我有一个问题：悬停列表中的任何li时，div会在li旋转时自动添加宽度（应用css变换）。动画完成后，它将获得原始宽度。在Chrome中，它没有发生（至少在我的版本72.0.3626.109（64位）中），但是在Firefox 65.0.1（64位）中，当我将鼠标悬停在社交图标上时，它确实发生了。您可以在此处看到一个在线示例：https://lagaleramagazine.es/rucab/index.html（右上角的社交图标内联列表）。

.social-head-container {
  position: absolute;
  z-index: 10000000000000000;
  float: right;
  width: 138px;
  font-size: 0px;
  background: #c23f69;
  padding-left: 2px !important;
  /* height: 30px; */
  right: 28px;
  padding-right: 0px;
  top: 75px;
  margin: 0px !important;
}

.container-social ul {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  margin: 0;
  height: 50px;
  background: red;
  width: 197px;
  padding: 0;
  display: flex;
}

.container-social ul li {
  position: relative;
  list-style: none;
  height: 51px;
  width: 51px;
}

.container-social ul li a {
  display: block;
  transition: 0.5s;
  background: #333;
}

.container-social li a span {
  width: 100%;
  height: 100%;
}

.container-social ul li a span:before {
  font-family: fontAwesome;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #333;
  transform-origin: top;
  transition: transform 0.5s;
  text-align: center;
}

.container-social ul li:hover a span:before {
  transform: rotateX(90deg) translateY(-50%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li a span:after {
  font-family: fontAwesome;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  color: #fff;
  transform-origin: bottom;
  transition: transform 0.5s;
  text-align: center;
  transform: rotateX(90deg) translateY(50%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li:nth-child(1) a span:after {
  background: #8a3ab9;
}

.container-social ul li:nth-child(2) a span:after {
  background: #3B5998;
}

.container-social ul li:nth-child(3) a span:after {
  background: #0084b4;
}

.container-social ul li:nth-child(4) a span:after {
  background: #0077B5;
}

.container-social ul li:nth-child(5) a span:after {
  background: #3cba54;
}

.container-social ul li:hover a span:after {
  transform: rotateX(0deg) translateY(0%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li:nth-child(1) a span:before,
.container-social ul li:nth-child(1) a span:after {
  content: '\f16d';
}

.container-social ul li:nth-child(2) a span:before,
.container-social ul li:nth-child(2) a span:after {
  content: '\f09a';
}

.container-social ul li:nth-child(3) a span:before,
.container-social ul li:nth-child(3) a span:after {
  content: '\f099';
}

.container-social ul li:nth-child(4) a span:before,
.container-social ul li:nth-child(4) a span:after {
  content: '\f0e1';
}

.container-social ul li:nth-child(5) a span:before,
.container-social ul li:nth-child(5) a span:after {
  content: '\f0d5';
}

<div class="float-right social-head-container">
  <div class="container-social">
    <ul>
      <div class="social-head">
        <li><a href="#"><span></span></a></li>
      </div>
      <div class="social-head">
        <li><a href="#"><span></span></a></li>
      </div>
      <div class="social-head">
        <li><a href="#"><span></span></a></li>
      </div>
    </ul>
  </div>
</div>