In the CSS Transforms Module Level 2 there will be individual transform properties for translate, scale, and rotate. This pen by Wes Bos demonstrates the new rotate syntax (use Canary): See the Pen ALbmzN by Wes Bos (@wesbos) on CodePen. So how exactly is said syntax? Here’s a snippet from the spec: The rotate property …
Tag Archives: transform
New CSS
Cinema Seat Preview
Maybe you are familiar with those ticket booking systems where, at some point during the purchase flow, you have to choose a seat. This is usually done when selling tickets for games, movies, flights or concerts. Wouldn’t it be cool to have some kind of “realistic” preview of the seat, i.e. see the stage or …
The Letter-Heads
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: …
Continue reading “Vertical align anything with just 3 lines of CSS”
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. …
Continue reading “Meny — An experimental CSS 3D fold-in menu”
The Box
CSS/JS 3D Image Transitions
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: …