Menu item 3D effect on hover with only css

Developer
Twikito
Size
2,710 Kb
Views
28,336
  1. Menu item 3D effect on hover with only css Previews
  2. Menu item 3D effect on hover with only css HTML Codes
  3. Menu item 3D effect on hover with only css CSS Codes

How do I make an menu item 3d effect on hover with only css?

What is a menu item 3d effect on hover with only css? How do you make a menu item 3d effect on hover with only css? This script and codes were developed by Twikito on 11 September 2022, Sunday.

Menu item 3D effect on hover with only css Previews
IQ Test

Menu item 3D effect on hover with only css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu item 3D effect on hover with only css</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Droid+Serif'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav>	<a href="#" data-text="Lorem">	<span>Lorem</span>	</a>	<a href="#" data-text="Quos">	<span>Quos</span>	</a>	<a href="#" data-text="Quid">	<span>Quid</span>	</a>	<a href="#" data-text="Mollitia">	<span>Mollitia</span>	</a>
</nav>
</body>
</html>

Menu item 3D effect on hover with only css - Script Codes CSS Codes

body { -webkit-perspective: 800px; perspective: 800px;
}
a { position: relative; display: inline-block; margin: 0 1em; padding: 0; border: none; outline: none; background: none; text-decoration: none; text-align: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
a span, a::before, a::after { display: block; color: #3498db; font: 1.5em/2 "droid serif"; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
a span { padding: 0 1em; background: white; -webkit-transform: translateZ(1em); transform: translateZ(1em);
}
a::before, a::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
a::before { content: attr(data-text); padding: 0 1em; background: #124364; color: white; -webkit-transform: rotateX(-90deg) translateZ(1em); transform: rotateX(-90deg) translateZ(1em);
}
a::after { width: 2em; left: initial; content: ''; background: #1d6fa5; -webkit-transform: rotateY(90deg) translateZ(1em); transform: rotateY(90deg) translateZ(1em);
}
a:nth-child(n+3)::after { left: 0; right: initial; -webkit-transform: rotateY(-90deg) translateZ(1em); transform: rotateY(-90deg) translateZ(1em);
}
a:hover, a:focus { -webkit-transform: rotateX(90deg); transform: rotateX(90deg);
}
/* misc */
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; background: #3498db;
}
nav { margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap;
}
Menu item 3D effect on hover with only css - Script Codes
Menu item 3D effect on hover with only css - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 3
Size 2,710 Kb
Views 28,336
Do you need developer help for Menu item 3D effect on hover with only css?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twikito (Twikito) Script Codes
Name
Beautiful Textual Map of French towns with CSS
Input focus effect with only CSS
Full page table inside the grid
Beautiful Textual Map of France with CSS
LavaLamp effect with CSS
Realistics radio buttons with only css
Image with hover CSS3 effect and full overlay
UI with UX improvements with only CSS
Easy CSS3 checkboxes and radio buttons
CSS-only shadow-scrolling effect
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!