Skip to content
Advertisements

JavaScript Card Flip 1

CODEPEN:

JavaScript Card Flip

Github:https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/JavaScript%20Card%20Flip%201


HTML CODE:

<body onkeydown="keyFunction(event)">

    <div class="container">

        <div class="card">
            <div class="front word1_front">TRUECODES</div>
        </div>

        <div class="card">
            <div class="back word1_back">CODEBLOGGER</div>
        </div>
    </div>
</body>

CSS CODE:

html,body{
    height: 100%;
    margin: 0;
}
body{
    background: #262626;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container{
    position: relative;
    width: 225px;
    height: 350px;
    perspective:1000px;
    -webkit-perspective: 1000px;
    border-radius: 4px;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    cursor: pointer;
}
.card div{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 6px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: Verdana;
    color: #262626;
}
.card .back {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
.container.active .card{
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

JS CODE:

 let box = document.querySelector(".container");
        box.addEventListener("click", function () {
            box.classList.toggle("active");
        });

        function keyFunction(e) {
            if (e.keyCode == 38) {
                box.classList.add("active");
            };
            if (e.keyCode == 40) {
                box.classList.remove("active");
            };
        };
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: