New CSS rotate syntax

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

css-rotate

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 accepts an angle to rotate an element, and optionally an axis to rotate it around, specified as the X, Y, and Z lengths of an origin-anchored vector. If the axis is unspecified, it defaults to 0 0 1, causing a “2d rotation” in the plane of the screen.

Cinema Seat Preview

CinemaSeatPreviewExperiment_03

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 screen from the perspective of the space you chose? Of course it would 🙂 This is the kind of question that resulted into a new experiment which we’d like to share with you today.

Cool!

Cinema Seat Preview Demo →
Cinema Seat Preview Article →

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: -200px;
}
.element {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Some great demos of modals using this technique, along with some fancy animations, can be found on Codrops

Vertical align anything with just 3 lines of CSS →
Modal Window Effects →

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.

Meny Demo →
Meny Source (GitHub) →

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: '+='+Math.PI,
      rotateZ: '+='+Math.PI
    },1500);    

In the back, TransformJS will translate that to the correct CSS3 properties, for all browsers.

TransformJS →