Vertical align anything with just 3 lines of CSS

.element { position: relative; top: 50%; transform: translateY(-50%); } Same goes for horizontal centering. Where one – back in the day – would abuse margin-left by setting a negative margin to half of the width, we can now use translateX(-50%) to horizontally center a fluid-width box. .element { position: relative; width: 400px; left: 50%; margin-left: […]

Meny β€” An experimental CSS 3D fold-in menu

A UI experiment with a 3D fold-in menu. Move your mouse to the left edge of this page β€” or swipe in from the left edge if you’re on a touch device β€” to expand the menu. A refreshing alternative to the already overly common left nav flyout which Facebook introduced in their mobile app. […]

TransformJS

Transforming elements via Javascript in all browsers at once can be a real pain in the ass (think vendor prefixes). Enter TranformJS: 2D and 3D transforms as regular CSS properties you can set using .css() and animate using .animate() In code that basically means you can now use this: $(‘#test’).animate({ translateY:’+=150′, scale:’+=2′, rotateY: ‘+=’+(2*Math.PI), rotateX: […]