From fdd0aede9ea3f6729cb02ffe795d31df4d25b2cb Mon Sep 17 00:00:00 2001 From: alirezashafiun Date: Tue, 25 Jul 2023 16:56:23 +0330 Subject: [PATCH] updated flip card project --- FlipCardAnimation.html | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/FlipCardAnimation.html b/FlipCardAnimation.html index 68d9f23..feaf5e1 100644 --- a/FlipCardAnimation.html +++ b/FlipCardAnimation.html @@ -29,7 +29,9 @@ .flip-card { width: 300px; - height: 600px; + height: 300px; + perspective: 800px; + margin: 100px; } .flip-card img { @@ -50,7 +52,26 @@ .flip-card:hover .filp-card-inner { transform: rotateY(180deg); } + + .flip-card-front, + .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + } + + .flip-card-back { + background-color: lightblue; + color: #fff; + transform: rotateY(180deg); + } +