frontend->3d navbar hover effect

tkrupesh14 · tkrupesh14 · commit fdbef4c5fbee · 2022-10-21T21:22:32.000+05:30
diff --git a/Fronted Projects/3D Nav Bar Hover Effect/index.html b/Fronted Projects/3D Nav Bar Hover Effect/index.html
@@ -0,0 +1,14 @@
+<html>
+<head> 
+<title> 3D Nav Bar Hover Effect </title>
+</head>
+<link rel="stylesheet" type="text/css" href="style.css">
+<body>
+<section class="container">
+    <div><p>Home</p></div>
+    <div><p>About</p></div>
+    <div><p>Contact</p></div>
+    <div><p>Blog</p></div>
+</section>
+    </body>
+</html>
diff --git a/Fronted Projects/3D Nav Bar Hover Effect/style.css b/Fronted Projects/3D Nav Bar Hover Effect/style.css
@@ -0,0 +1,64 @@
+ *
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background: #111;
+}
+.container
+{
+    height: 400px;
+    width: 250px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 220px;
+}
+p
+{
+    font-size: 30px;
+    text-align: center;
+    margin-top: 5px;
+    cursor: pointer;
+    color: #fff;
+    width: 100%;
+    background: #ea5455;
+    border-radius: 10px;
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-weight: 700;
+    letter-spacing: 3px;
+}
+div
+{
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 10px;
+    width: 200px;
+    height: 40px;
+    margin-top: 6%;
+    transition-duration: 0.2s;
+}
+p:hover
+{
+    background: #fff;
+    color: #111;
+}
+div:nth-child(even)
+{
+    transform: perspective(300px) rotateY(45deg);
+    box-shadow: -2px 2px 7px #fff;
+}
+div:nth-child(odd)
+{
+    transform: perspective(300px) rotateY(-45deg);
+    box-shadow: 2px 2px 7px #fff;
+}
+div:hover
+{
+    transform: rotateY(0);
+    box-shadow: 0 0 0;
+}
+
+
+
+
