Now that 3D transform support has landed in Firefox Aurora, it’s prime time to go back and revise any previous WebKit-only demos for other browsers.

Paul Rouget:

Please use “px” at the end of the perspective values. If you don’t, this will only works with Webkit (your examples don’t work correctly with Firefox because of that).

You got it, Paul.

#my-3d-environment {
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
      -ms-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}

Along with WebKit hardware-accelerated anti-aliasing, CSS 3D transforms can have adverse effects on type rendering when translate X/Y values have subpixel, or decimal values.

View fiddle: Subpixel type rendering. Hover over elements to disable transforms.

In WebKit, the first two elements will have fuzzy type and borders, as rendered elements don’t exactly line up with pixels on the screen.

Just to be thorough, I took a look at 2D subpixel translation transforms (i.e. translateX(0.5px)). In WebKit, the type seems to render appropriately with the subpixel values. However the borders don’t look so good. They get positioned in between pixel spaces, rendering a 1px border with 2 pixels. Firefox doesn’t have any issues with borders.

The fix is to prevent decimal values when using translate and round those values to the nearest integer.

I’m finding that Flash content inside an element with a CSS transform is a bit buggy across browsers, even for a simple 2D translation translate(20px, 50px). Safari sometimes renders the content, in the example below, the YouTube video is offset. Firefox 4 doesn’t render anything. Chrome and Opera seem to be fine.

View example on jsFiddle

Going through last year’s 24ways, I caught this nugget.

Natalie Downe:

Rotations can be specified in degrees, radians (rads) or grads). WebKit also supports turns unfortunately Firefox doesn’t just yet.

turn is a valid CSS3 angle unit. A year later after Ms. Downe’s article, WebKit is still the only platform to support it.

turn angle unit fiddle

This deserves more research and tests.

Renders

• 2D transforms
• border-radius, elliptical border-radius
• text-shadow
• gradients

Does not render

• 3D transforms
• Typekit or @font-face
• canvas

Couple issues with Opera’s current implementation of CSS transforms. I’m looking at this with version 10.62

• Re-renders texts with poor anti-aliasing
• A space in the value of transform functions will be thrown. So scale( 0.5) will not work, but scale(0.5) will. This goes for any transform function, translate(), rotate(), etc.

Live example:

-o-transform: translate( 20px, 10px) Value function has leading space. Transform will not be recognized. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-o-transform: translate(20px, 10px) No leading space. Transform re-renders text with poor anti-aliasing. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Screenshot: