3-D flip card hover effect using html and CSS.
Hello guys, Planics Devloper is
providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then
copy code from our post otherwise watch our video on blog.
If you want to design card hover or
something then click here and get latest design
free Click here
How to design Best product card hoverin 2020?
design beautiful card hove
r amination using
html and CSS . you learn in this video how to flip card using html and CSS.
How to design different type ofanimation in one loader using html and css?
Free Cards Effect in HTML with CSShow to design animated card for website so please check it out in YouTube.Here we show mouse hover flip animation on card using pure html and CSS. Here we show how to transform any object using only CSS.
card.html
<!DOCTYPE html>
<html>
<head>
<meta
charset='utf-8'>
<meta
http-equiv='X-UA-Compatible' content='IE=edge'>
<title>card </title>
<meta
name='viewport' content='width=device-width, initial-scale=1'>
<link
rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script
src='main.js'></script>
<link
rel='stylesheet' type='text/css' media='screen' href="style.css">
</head>
<body>
<div
class="container">
<div
class="card-container">
<div
class="card">
<div class="card-front">
<img src="images/team2.jpg">
</div>
<div class="card-back">
<div class="content">
<h1>lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
fugiat enim unde fugit eligendi recusandae!</p>
</div>
</div>
</div>
</div>
<div
class="card-container">
<div
class="card">
<div class="card-front">
<img src="images/team3.jpg">
</div>
<div class="card-back">
<div class="content">
<h1>lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
fugiat enim unde fugit eligendi recusandae!</p>
</div>
</div>
</div>
</div>
<div
class="card-container">
<div
class="card">
<div class="card-front">
<img src="images/team4.jpg">
</div>
<div class="card-back">
<div class="content">
<h1>lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
fugiat enim unde fugit eligendi recusandae!</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Style.css
/* background:linear-gradient(#f85032,#e73827); */
*
{
margin: 00px;
padding:00px;
font-family:
'Piedra', cursive;
}
.container
{
height: 100vh;
width:100%;
display: flex;
justify-content:
space-evenly;
align-items:
center;
}
.card-container
{
height: 300px;
width:250px;
/*
background-color: yellow; */
position:
relative;
}
.card
{
height: 100%;
width:100%;
position:
absolute;
/*
background-color:pink; */
transform-style:
preserve-3d;
transition: all
1s;
}
.card-front
{
height: 100%;
position:
absolute;
width:100%;
/*
background-color:red; */
border-radius:
10px;
backface-visibility: hidden;
}
.card-front img
{
height: 100%;
width:100%;
object-fit:
cover;
border-radius:
10px;
}
.card-back
{
height: 100%;
position:
absolute;
width:100%;
background:linear-gradient(#f85032,#e73827);
transform:rotateY(180deg);
border-radius:
10px;
backface-visibility: hidden;
}
.card:hover
{
transform:rotateY(180deg);
}
.content
{
position:
absolute;
top:70px;
text-align:
center;
color:white;
}
.content h1
{
margin-bottom:
5px;
}
.content p
{
align-items: justify;
padding:20px;
border:1px solid
white;
}
|
How to Design round animated loader usinghtml and css?
In this link we are provide you how to
set video as background any web page.
0 coment�rios: