I am too weak in designing, so practicing some css
But i am stucked on backface-visibility:hidden; but don't know why its not working, its working on an class but not in another class while i have coded the attribute with both classes at a time
can anyone explain this ?
here is my codes
body{
background: #292929;
align-items: center;
display: flex;
justify-content: center;
font-family: arial;
height: 100vh;
}
.cardBox{
perspective: 500px;
margin: 15px;
}
.card{
position: relative;
width: 150px;
height: 150px;
background: #fff;
transform-style: preserve-3d;
transition: .5s ease;
box-shadow: 0 30px 30px rgba(0, 0, 0, .5);
}
.facebook{
background: #3b5998;
}
.twitter{
background: #00aced;
}
.googleplus{
background: #dd4b39;
}
.card-front,
.card-back{
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
color: #fff;
backface-visibility: hidden;
justify-content: center;
align-items: center;
display: flex;
}
.card-front{
font-size: 40px;
}
.card-back{
font-size: 30px;
}
.cardBox:hover .card{
transform: rotateY(180deg);
}
.card-back{
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d card flip animation - css tutorial - Pure Css Social Media Buttons</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="cardBox">
<div class="card facebook">
<div class="card-front">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
<div class="card-back">Facebook</div>
</div>
</div>
<div class="cardBox">
<div class="card twitter">
<div class="card-front">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
<div class="card-back">Twitter</div>
</div>
</div>
<div class="cardBox">
<div class="card googleplus">
<div class="card-front">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</div>
<div class="card-back">Google+</div>
</div>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/66058327/backface-visibilityhidden-not-working-properly 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
