Free Coding Ebook 👉 Get Now
How to make a Coin Flip Using HTML and CSS ? Coin Flip Project
Welcome to today’s tutorial. Today we are going to create a coin flipper. For this, we are going to use HTML, CSS.
ADVERTISEMENT
By the end of this blog after reading, you can make a Coin flipper. You can also make a card flipper. On hovering it take a flip. So let’s learn.
Hey Learners,
Live server:-
Before writing the code let’s see the live server of the countdown so you can understand it perfectly.
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
HTML CODE:-
HTML is the basic layout of any webpage.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Coin Flip with Text</h1> <h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://collections.museumsvictoria.com.au/content/media/1/415101-medium.jpg" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Coin</h1>
</div>
</div>
</div>
</body> </html>
CSS:-
- The
transform-style
property specifies how nested elements are rendered in 3D space. - Note: This property must be used together with the transform property.
- preserve-3d—-Specifies that child elements will preserve its 3D position.
- The
backface-visibility
property defines whether or not the back face of an element should be visible when facing the user. - The back face of an element is a mirror image of the front face being displayed.
- This property is useful when an element is rotated. It lets you choose if the user should see the back face or not.
- The
box-shadow
property attaches one or more shadows to an element.
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
I hope you have loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.