diff --git a/projects/card-flip-animation/index.html b/projects/card-flip-animation/index.html new file mode 100644 index 0000000..d9e2c27 --- /dev/null +++ b/projects/card-flip-animation/index.html @@ -0,0 +1,25 @@ + + + + + + Flip Card Animation + + + +
+
+
+

Front Side

+

Click to flip!

+
+
+

Back Side

+

More details here.

+
+
+
+ + + + diff --git a/projects/card-flip-animation/script.js b/projects/card-flip-animation/script.js new file mode 100644 index 0000000..6b024ea --- /dev/null +++ b/projects/card-flip-animation/script.js @@ -0,0 +1,3 @@ +function flipCard(cardElement) { + cardElement.classList.toggle('flipped'); +} diff --git a/projects/card-flip-animation/style.css b/projects/card-flip-animation/style.css new file mode 100644 index 0000000..d68a3f4 --- /dev/null +++ b/projects/card-flip-animation/style.css @@ -0,0 +1,52 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + height: 100vh; + background: linear-gradient(135deg, #74ebd5, #9face6); + display: flex; + align-items: center; + justify-content: center; + font-family: Arial, sans-serif; +} + +.card-container { + perspective: 1000px; +} + +.card { + width: 300px; + height: 200px; + position: relative; + transform-style: preserve-3d; + transition: transform 0.8s; + cursor: pointer; +} + +.card-front, +.card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 20px; + box-shadow: 0 8px 20px rgba(0,0,0,0.2); + background-color: white; +} + +.card-back { + transform: rotateY(180deg); + background-color: #1775d4; +} + +.card.flipped { + transform: rotateY(180deg); +}