CODEPEN:
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");
};
};
TrueCodes 
Leave a comment