How to create flip carts using css
HELLO DUDE
YOU ARE FOOL?
I KNOW YOU ARE DEVELOPER
<![CDATA[
<!--DOCTYPE html-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
</style>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img alt="" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t_Xqk5K2FZodgIFrNtPj2nJoZRc4isfY4RudUHrzKkfjhAS3qHEmGCvq2m-kQViah_hETGNDpYYD2BEEir_9FklOU5gY_Glbwvli81F0MReW088HzK2n9b_NCZhVpcgjks06YzUraRUvZkhzfY8nU-cLTdGMCq4Nd4cnwjzbm65qyYPyqUs5tE=s0-d">
</div>
<div class="flip-card-back">
<h1>HELLO DUDE</h1>
<p>YOU ARE FOOL?</p>
<p>I KNOW YOU ARE DEVELOPER</p>
</div>
</div>
</div>
</body>
</html>
]]>
agyanadda
Author & Editor
Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.
0 $type={blogger}:
Post a Comment