Pure CSS Direction Aware Hover Effect

Pure CSS Direction Aware Hover Effect

Looking to create nice and clean direction-aware hover effect using CSS3 only? The idea to show the backside of the cube from the direction we are moving with the mouse.

When we “leave” the element, the cube will roll out back to show the front side of the cube. Its works with the mouse pointer and aware of the direction of the mouse pointer.

It works on hover the cube and the boxes aware of the direction of a mouse cursor. The cube has two sides. The front and backside. The direction-aware hover effect builds with CSS3 and HTML5, and it follows the mouse direction whether it comes from left, right, top or bottom.

You need to use an unordered list and SVG for adding icon. To make the directions work, it requires to used the anchor links.

It’s a nice and interesting-looking effect which works with four sides of the cube. Example when a user mouse hovers the cube from the top, It rolls the cube and shows the backside of it with content.

Starting with Markup

Have a look the HTML for the first cube. You can find the complete HTML code in below.

<ul ontouchstart>
  <li>
    <div class='link'>
      <a href='http://codepen.io/gabriellewee' target='_blank'></a>
      <a href='http://codepen.io/gabriellewee' target='_blank'></a>
      <a href='http://codepen.io/gabriellewee' target='_blank'></a>
      <a href='http://codepen.io/gabriellewee' target='_blank'></a>
      <div class='cube codepen'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div>
          <svg viewbox='0 0 85 85'>
            <path d='M82.5,29.1666667 L42.5,2.5 L2.5,29.1666667 L2.5,55.8922001 L42.5,82.5 L82.5,55.8922001 L82.5,29.1666667 Z M42.5,2.9120677 L42.5,29.1666667 L42.5,2.9120677 Z M42.5,55.8922001 L42.5,82.5 L42.5,55.8922001 Z M2.5,29.1666667 L2.5,55.8922001 L42.5,29.1666667 L82.5,55.8922001 L82.5,29.1666667 L42.5,55.8922001 L2.5,29.1666667 Z'></path>
          </svg>
        </div>
        <div>/gabriellewee</div>
      </div>
    </div>
  </li>
</ul>

Apply Styling

You will find the complete CSS in the codepen but here are few lines of code.

ul {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform: translateZ(96px);
          transform: translateZ(96px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 12px;
}
ul li {
  padding: 12px;
}
.clips {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: -100;
}
.link {
  position: relative;
  width: 96px;
  height: 96px;
}
.link a {
  -webkit-transform-origin: 48px 48px -48px;
          transform-origin: 48px 48px -48px;
  display: block;
  position: absolute;
  z-index: 1;
  -webkit-transform: translateZ(24px);
          transform: translateZ(24px);
  width: 100%;
  height: 100%;
}

 

Code ExamplesYou May Also Like