Flip hover html and css source code
<html>
<head>
<title>First Tutorial</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<div class="card-container">
<div class="card">
<div class="front"><p>Front</p></div>
<div class="back"><p>Back</p></div>
</div>
</div>
</body>
</html>
CSS
margin: 0;
padding: 0;
}
.card-container{
width: 300px;
height: 400px;
border-radius: 4px;
background: transparent;
perspective: 900px;
transition: 0.5s;
position: absolute;
top: 20%;
right:40%;
}
.card p{
font-size: 40px;
font-weight: 450;
color: yellow;
}
.card{
position: relative;
width: 100%;
height: 100%;
transition: all 0.7s;
transform-style: preserve-3d;
}
.card-container:hover .card{
transform: rotateY(-180deg);
}
.front{
background: linear-gradient(109.6deg, rgb(33, 99, 255) 11.2%, rgb(0, 10, 139) 100.2%);
}
.back{
background: linear-gradient(109.6deg, rgb(253, 147, 147) 11.2%, rgb(250, 127, 251) 91.1%-);
transform: rotateY(-180deg);
}
.front,.back{
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 4px;
box-shadow: 0 10px 20px rgba(0,0,0,0.50),
0 6px 6px rgba(0,0,0,0.26);
backface-visibility: hidden;
}
.card-container:hover .card{
transform: rotateY(-180deg);
}
No comments:
Post a Comment