Animated Card

 

Lien d’origine: https://codepen.io/ivorjetski/pen/ExaKmjw

HTML:

 

<section class="cardImg">
<div class="columns">
<div class="column">
<screen class="ecran_carte">
<hoverspace></hoverspace>
<shadow></shadow>
<card>
<back><img class="card_1"src="http://localhost/wordpress/wp-content/uploads/2022/02/card_back.png"></img></back>
<img class="card_1" src="http://localhost/wordpress/wp-content/uploads/2022/02/King_of_hearts_fr.png"></img>
</card>
</screen>
</div> 
</div>
</section>

CSS:

.cardImg {
font-size: 1vmin;
background: radial-gradient(#bd243f, #190d23);
}
.cardImg {
color: #190d23;
font-size: 12rem;
padding: 1rem;
font-family: "Courier New";
overflow: hidden;
}
.cardImg .card_1{
height: 550px;
width: 377px;
}
.cardImg screen,
.cardImg screen *,
screen *:before,
screen *:after {
box-sizing: border-box;
content: "";
display: block;
transform-style: preserve-3d;
position: relative;
perspective: 200rem;
}
.cardImg card {
margin: auto;
height: 550px;
width: 377px;
background: #fff;
border-radius: 20px;
transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0) rotate(1deg);
position: relative;
animation: rotate 3s linear;
}
.cardImg card *, card *:before, card *:after, card:before, card:after {
position: absolute;
left: 0;
top: 0;
}
.cardImg card:before, card:after {
width: 100%;
height: 100%;
transform: translate3d(0, 0, -0.2rem) rotateY(180deg);
border-radius: 20px;
animation: light 3s linear;
box-shadow: inset 0 0 1rem rgba(25, 13, 35, 0.5);
background-image: linear-gradient(to right bottom, rgba(25, 13, 35, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0), rgba(25, 13, 35, 0.3));
}
.cardImg card:after {
transform: translate3d(0, 0, 0.2rem) rotateY(0deg);
animation: light 3s linear reverse;
}
.cardImg back {
transform: translate3d(0, 0, -0.1rem) rotateY(180deg);
bottom: 0;
right: 0;
margin: auto;
}
.cardImg hoverspace {
height: 100%;
width: 50rem;
position: absolute;
transform: translate3d(0, 0, 50rem);
top: 0;
left: 0;
right: 0;
margin: auto;
cursor: grab;
}
.cardImg hoverspace:hover ~ card {
animation: rotatehover 3s linear;
}
.cardImg hoverspace:hover ~ card:before, hoverspace:hover ~ card:after {
animation: lighthover 3s linear;
}
.cardImg hoverspace:hover ~ card:after {
animation: lighthover 3s linear reverse;
}
.cardImg hoverspace:hover ~ shadow {
animation: shadowhover 3s linear;
}
@keyframes rotate {
100% {
transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, -360deg) rotate(1deg);
}
}
@keyframes rotatehover {
100% {
transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, -360deg) rotate(1deg);
}
}
@keyframes light {
0%, 100%, 50% {
background-color: rgba(255, 255, 255, 0);
}
25% {
background-color: rgba(245, 227, 227, 0.7);
}
75% {
background-color: #190d23;
}
}
@keyframes lighthover {
0%, 100%, 50% {
background-color: rgba(255, 255, 255, 0);
}
25% {
background-color: rgba(245, 227, 227, 0.7);
}
75% {
background-color: #190d23;
}
}
@keyframes shadow {
25% {
transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg) skewY(-90deg);
opacity: 0;
}
50% {
transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg) skewY(0);
opacity: 0.2;
}
75% {
transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg) skewY(90deg);
opacity: 0;
}
100% {
transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(180deg) skewY(0);
opacity: 0.2;
}
}
@keyframes shadowhover {
25% {
transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg) skewY(-90deg);
opacity: 0;
}
50% {
transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg) skewY(0);
opacity: 0.2;
}
75% {
transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg) skewY(90deg);
opacity: 0;
}
100% {
transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(180deg) skewY(0);
opacity: 0.2;
}
}