Pure CSS Direction Aware Cube Links

Direction Aware Cube Links

Do you know how to create Direction aware cube links using pure CSS only? If not then here is well coded by Gabrielle Wee

It works on hover the cube and the boxes aware the direction of a mouse cursor. The cube has two sides. The front and back side.

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.

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

<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>

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%;
}

Let’s have a look the demo here.

See the Pen CSS-Only Direction-Aware Cube Links by Gabrielle Wee (@gabriellewee) on CodePen.

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *