【发布时间】：2018-07-21 11:50:21
【问题描述】：
我试图根据视频格式的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>
【问题讨论】：
-
有什么问题？你的 sn-p 似乎渲染得很好
-
我从教程中添加了一张图片，如果您检查它，我将不胜感激。我在图像上绘制的那些红点是没有出现的，它们是 a:before 和 a:after 。也当我检查时它们就在那里，但它们是透明的。谢谢
标签： html css isometric social-media