CODEWITHSUNDEEP
htmlcss
Mijanur Rahaman
Mijanur Rahaman

Reputation: 379

Backface-visibility:hidden; not working properly

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>

if anyone can find the bug please indicate it.

Upvotes: 0

Views: 157

Answers (1)

Aiva
Aiva

Reputation: 26

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: 0.5s ease;
    box-shadow: 0 30px 30px rgba(0, 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;
    transform: rotateY(0deg);
}
.card-back {
    font-size: 30px;
    transform: rotateY(-180deg);
}
.cardBox:hover .card {
    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>

Sorry I don't know how to use stack overflow properly yet and I think I'm pretty bad at explaining, but you should rotate the card-front and card-back (when it is not hovered)(front should be 0deg, back should be -180deg )

Upvotes: 1

Related Questions