CSS-Only Direction-Aware Cube Links

HTML
<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> <li> <div class='link'> <a href='http://github.com/elletricity' target='_blank'></a> <a href='http://github.com/elletricity' target='_blank'></a> <a href='http://github.com/elletricity' target='_blank'></a> <a href='http://github.com/elletricity' target='_blank'></a> <div class='cube github'> <div></div> <div></div> <div></div> <div></div> <div> <svg viewbox='0 0 85 85'> <path class='fill' d='M76.7 19c1.1-4.8 0.6-10.1-1.6-15 -0.7-1.7-2.3-2.9-4.2-3 -0.5-0.1-1.1-0.1-1.6-0.1 -4.6 0-10.7 1.6-15 5C50.4 5 46.4 4.6 42.5 4.6V4.4c-3.9 0-7.9 0.4-11.8 1.3 -4.3-3.4-10.4-5-15-5 -0.5 0-1.1 0-1.6 0.1 -1.9 0.1-3.5 1.3-4.2 3C7.7 8.7 7.2 14 8.3 18.8c-3.3 4.4-5 9.6-5 15.4 0 12.5 4.2 21.4 12.5 26.4 2.6 1.6 5.6 2.9 9 3.7 -0.6 1.7-0.9 3.7-0.9 6.1v11.2h0c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5l0-11c0-4.5 1.5-7.7 4.5-9.7 -1.5-0.1-3.2-0.3-5.2-0.8 -3.8-0.7-7-1.9-9.7-3.6C11.6 52.4 8.3 45.1 8.3 34.4c0-5.6 1.9-10.3 5.6-14.3 -1.7-4.4-1.4-9.6 0.6-14.3 0.4 0 0.8 0 1.2 0 4.9 0 10.8 2.2 13.5 5.5 4.5-1.2 9-1.8 13.3-1.8v0.1c4.3 0 8.8 0.6 13.3 1.8 2.7-3.3 8.6-5.5 13.5-5.5 0.4 0 0.8 0 1.2 0 2 4.7 2.3 9.9 0.6 14.3 3.7 4 5.6 8.7 5.6 14.3 0 10.7-3.3 18-10.2 22.2 -2.7 1.7-5.9 2.9-9.7 3.6 -2 0.5-3.7 0.7-5.2 0.8 3 2 4.5 5.2 4.5 9.7l0 11c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5h0V70.6c0-2.4-0.3-4.4-0.9-6.1 3.4-0.8 6.4-2.1 9-3.7 8.3-5 12.5-13.9 12.5-26.4C81.7 28.6 80 23.4 76.7 19z'></path> </svg> </div> <div>/elletricity</div> </div> </div> </li> </ul> <svg class='clips' viewbox='0 0 0 0' xmlns='http://www.w3.org/2000/svg'> <defs> <clippath id='clip-right'> <polygon id='right' points='48 0 48 96 0 48'></polygon> </clippath> <clippath id='clip-left'> <polygon id='left' points='0 0 0 96 48 48'></polygon> </clippath> <clippath id='clip-bottom'> <polygon id='bottom' points='96 48 0 48 48 0'></polygon> </clippath> <clippath id='clip-top'> <polygon id='top' points='0 0 96 0 48 48'></polygon> </clippath> </defs> </svg>
SCSS
$indigo: #3023ae; $iris: #53a0fe; $lime: #b4ed50; $codepen: #fcd000; $github: #4183c4; $f: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; $p: 12px; *, *:before, *:after { box-sizing: border-box; } * { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; } *:focus { outline: none!important; } body, html { height: 100%; } body { display: flex; align-items: center; align-content: center; justify-content: center; padding: $p; background: mix($iris, $lime); background: linear-gradient(135deg, $indigo 0%, $iris 50%, $lime 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$indigo', endColorstr='$lime',GradientType=1 ); font-family: $f; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } ul { perspective: 1000; transform: translateZ(#{$p*8}); display: flex; list-style: none; margin: 0; padding: $p; li { padding: $p; } } .clips { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; z-index: -100; } .link { position: relative; width: $p*8; height: $p*8; a { transform-origin: $p*4 $p*4 -#{$p*4}; display: block; position: absolute; z-index: 1; transform: translateZ(#{$p*2}); width: 100%; height: 100%; &:nth-child(1) { top: 0; left: 0; height: 50%; clip-path: polygon(50% 100%, 0 0, 100% 0); @-moz-document url-prefix() { clip-path: url(#clip-top); } &:hover, &:focus { ~ .cube { transform: rotateX(-0.5turn); div:nth-child(6) { transform: rotateY(180deg) rotateZ(180deg) translateZ($p*8); } } } } &:nth-child(2) { top: 0; right: 0; width: 50%; clip-path: polygon(100% 100%, 0 50%, 100% 0); @-moz-document url-prefix() { clip-path: url(#clip-right); } &:hover, &:focus { ~ .cube { transform: rotateY(-0.5turn); } } } &:nth-child(3) { bottom: 0; right: 0; height: 50%; clip-path: polygon(0 100%, 50% 0, 100% 100%); @-moz-document url-prefix() { clip-path: url(#clip-bottom); } &:hover, &:focus { ~ .cube { transform: rotateX(0.5turn); div:nth-child(6) { transform: rotateY(180deg) rotateZ(180deg) translateZ($p*8); } } } } &:nth-child(4) { bottom: 0; left: 0; width: 50%; clip-path: polygon(0 100%, 0 0, 100% 50%); @-moz-document url-prefix() { clip-path: url(#clip-left); } &:hover, &:focus { ~ .cube { transform: rotateY(0.5turn); } } } &:hover, &:focus { z-index: 2; } } } .cube { transform-origin: $p*4 $p*4 -#{$p*4}; position: relative; z-index: 0; display: block; width: 100%; height: 100%; transition: all 300ms ease-out; div { display: flex; align-items: center; align-content: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white; // border-radius: 3px; svg { width: $p*4; height: $p*4; path:not(.fill) { fill: none; stroke: white; stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; } path.fill { fill: white; } } // top &:nth-child(1) { transform-origin: center top; transform: rotateX(90deg) translateY(#{-($p*8)}); } // bottom &:nth-child(2) { transform-origin: center bottom; transform: rotateX(-90deg) translateY($p*8); } // left &:nth-child(3) { transform-origin: left center; transform: rotateY(-90deg) translateX(#{-($p*8)}); } // right &:nth-child(4) { transform-origin: right center; transform: rotateY(90deg) translateX($p*8); } // front &:nth-child(5) { transform-origin: center center; transform: rotateX(0); } // back &:nth-child(6) { transform-origin: center center; transform: rotateY(180deg) translateZ($p*8); } } &.codepen { div { // top &:nth-child(1) { background: lighten($codepen, 35%); } // bottom &:nth-child(2) { background: lighten($codepen, 10%); } // left &:nth-child(3) { background: lighten($codepen, 20%); } // right &:nth-child(4) { background: lighten($codepen, 20%); } // front &:nth-child(5) { background: $codepen; } // back &:nth-child(6) { background: white; color: $codepen; } } } &.github { div { // top &:nth-child(1) { background: lighten($github, 35%); } // bottom &:nth-child(2) { background: lighten($github, 10%); } // left &:nth-child(3) { background: lighten($github, 20%); } // right &:nth-child(4) { background: lighten($github, 20%); } // front &:nth-child(5) { background: $github; } // back &:nth-child(6) { background: white; color: $github; } } } }
JAVASCRIPT
Expand for more options Login