updated flip card project

2 years ago · fdd0aede9e
parent b74f30a2f0
commit fdd0aede9e
1 changed files with 22 additions and 1 deletions
--- 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);
+        }
    </style>
+    <!-- notes 
+        transform-style: preserve-3d;
+            این گزینه را برای ایجاد عمق ایجاد میشود
+
+    -->
 </head>

 <body>