How to Implement 3D Unfolding Animation Icon Menu in Pure CSS3

How to Implement 3D Unfolding Animation Icon Menu in Pure CSS3: BY Russell30 Nov,2020; Tags:
CSS3 3D CSS3 Menu

Introduction

We know that CSS3 can be used to create a lot of cool 3D animation effects. For example, a CSS3 menu to be shared this time. It takes advantage of some features of CSS3 to realize the 3D animation effects when the menu is expanded. When the mouse is over the menu item, the menu item will also show a glowing effect, so that the overall visual effect is better and three-dimensional and cool.

Instructions

Css Code

.all {
  display: flex;
  -webkit-perspective: 10px;
          perspective: 10px;
  -webkit-transform: perspective(300px) rotateX(20deg);
          transform: perspective(300px) rotateX(20deg);
  will-change: perspective;
  -webkit-perspective-origin: center center;
          perspective-origin: center center;
  transition: all 1.3s ease-out;
  justify-content: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.all:hover {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  transition: all 1.3s ease-in;
  -webkit-transform: perspective(10000px) rotateX(0deg);
          transform: perspective(10000px) rotateX(0deg);
}
.all:hover .text {
  opacity: 1;
}
.all:hover > div {
  opacity: 1;
  transition-delay: 0s;
}
.all:hover .explainer {
  opacity: 0;
}

Js Code

<div class="all">
<div class="lefter">
  <div class="text">Hosting</div>
</div>
<div class="left">
  <div class="text">Web Design</div>
</div>
<div class="center">
  <div class="explainer"><span>Hover me</span></div>
  <div class="text">Frontend Development</div>
  </div>
<div class="right">
  <div class="text">Backend Development</div>
</div>
<div class="righter">
  <div class="text">SEO</div>
</div>
</div>

VIEW NOW