CARD FLIP IN CSS


Steps to follow : –

  1. Create html file ( You may copy html file named flip.html given below )
  2. Create css file ( You may copy css file named flip.css given below )
  3. Link them using property to copy them in html file of head tag.

<link rel=”stylesheet” type=”text/css” href=”flip.css”>

flip.html file

<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”flip.css”>
</head>
<body>
<div class=”main”>
<div class=”front”>FRONT FACE</div>
<div class=”back”>BACK FACE</div>
</div>
</body>
</html>

flip.css file

body{background:#000;}
.main{margin-left:100px;margin-top:100px;}
.main div{width:300px;height:400px;float:left;position:fixed;font-size:48px;border-radius:5px;}
.front{padding:10px;background:#ff6666;color:red;border:2px solid #ff6666;transform:rotateY(0deg);backface-visibility:hidden;transition:all 1s;}
.back{padding:15px;padding-left:40px;background:grey;color:white;border:2px solid grey;transform:rotateY(180deg);backface-visibility:hidden;transition:all 1s;}
.main:hover .front{transform:rotateY(-180deg);}
.main:hover .back{transform:rotateY(0deg);}

FRONT VIEW

BACK VIEW

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

One thought on “CARD FLIP IN CSS

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