等距社交媒体图标

Question

我试图根据视频格式的 this 教程在社交媒体图标上制作等距悬停效果。

问题是棱镜的侧面没有渲染出来，如下图。这些面孔在 ... a:before 和 ... a:after 选择器中定义，它们在那里（我通过检查页面验证了它）。

div.col-md-12{
  padding: 0;
}
div.social-media{
  min-height: 200px;
  background-color: darkgray;

}
ul.social{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0;
  margin: 0;
  display: flex;

}
ul.social li{
  list-style: none;
  margin: 0 40px;
}
ul.social li a .fab{
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;

}
ul.social li a{
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  box-shadow: -20px 20px 10px rgba(0.0,0,.5);
  transition: .5s;
}
ul.social li a:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  color: red;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  color: red;
  transition: .5s;
  transform: rotate(0deg) skewx(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0.0,0,.5);
}

ul.social li a:hover i.fa-facebook-f{
  color:#3B5998;
}
ul.social li a:hover i.fa-google-plus-g{
  color:#DB4437;
}
ul.social li a:hover i.fa-twitter{
  color:#1DA1F2;
}
ul.social li a:hover i.fa-snapchat-ghost{
  color:#FFFC00;
}
ul.social li a:hover i.fa-instagram{
  color:#9b6954;
}
ul.social li a:hover i.fa-telegram{
  color:#0088cc;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>

<footer class="footer-bottom">
  <div class="container-fluid">
    <div class=" social-media row">
        <div class="col-md-12 mahi">
          <div>
            <ul class="social">
              <li>
                <a class="" title="facebook">
                <i class="fab fa-facebook-f fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="google plus">
                <i class="fab fa-google-plus-g fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="twitter">
                <i class="fab fa-twitter fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="snapchat">
                <i class="fab fa-snapchat-ghost fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="instagram">
                <i class="fab fa-instagram fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="telegram">
                <i class="fab fa-telegram fa-lg fa-2x"></i>
               </a>
              </li>
            </ul>
            </body>

Answer 1

您正在使用 color css 属性，它定义了文本颜色。请改用 background 或 background-color:

background-color: red;

其他注意事项：

在可以避免时不鼓励使用 !important，而您可以避免（您可以直接控制 html）。
应该是a::before和a::after（两个冒号而不是一个）；这些不是伪类而是伪元素。它会以任何一种方式工作，但它可能无法在未来的浏览器中工作，并且不太清楚实际发生了什么。

div.col-md-12{
  padding: 0;
}
div.social-media{
  min-height: 200px;
  background-color: darkgray;

}
ul.social{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0;
  margin: 0;
  display: flex;

}
ul.social li{
  list-style: none;
  margin: 0 40px;
}
ul.social li a .fab{
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;

}
ul.social li a{
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  box-shadow: -20px 20px 10px rgba(0.0,0,.5);
  transition: .5s;
}
ul.social li a::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background-color: pink;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
  box-sizing: border-box !important;
}
ul.social li a::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background-color: red;
  transition: .5s;
  transform: rotate(0deg) skewx(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0.0,0,.5);
}

ul.social li a:hover i.fa-facebook-f{
  color:#3B5998;
}
ul.social li a:hover i.fa-google-plus-g{
  color:#DB4437;
}
ul.social li a:hover i.fa-twitter{
  color:#1DA1F2;
}
ul.social li a:hover i.fa-snapchat-ghost{
  color:#FFFC00;
}
ul.social li a:hover i.fa-instagram{
  color:#9b6954;
}
ul.social li a:hover i.fa-telegram{
  color:#0088cc;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>

<footer class="footer-bottom">
  <div class="container-fluid">
    <div class=" social-media row">
        <div class="col-md-12 mahi">
          <div>
            <ul class="social">
              <li>
                <a class="" title="facebook">
                <i class="fab fa-facebook-f fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="google plus">
                <i class="fab fa-google-plus-g fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="twitter">
                <i class="fab fa-twitter fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="snapchat">
                <i class="fab fa-snapchat-ghost fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="instagram">
                <i class="fab fa-instagram fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="telegram">
                <i class="fab fa-telegram fa-lg fa-2x"></i>
               </a>
              </li>
            </ul>
            </body>

等距社交媒体图标

isometric social media icons

html

css

social-media

isometric