How to make a Coin Flip Using HTML and CSS ? Coin Flip Project

How to make a Coin Flip Using HTML and CSS ? Coin Flip Project

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.


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, 


before writing the code let’s see the live server of the countdown so you can understand it perfectly.
 

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.

box-shadow: h-offset v-offset blur spread color
 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.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh.


Leave a Reply