{"id":7005,"date":"2015-07-16T00:29:05","date_gmt":"2015-07-16T04:29:05","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=7005"},"modified":"2015-07-26T12:50:32","modified_gmt":"2015-07-26T16:50:32","slug":"augment-photos-with-css3-matrix3d-transforms","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2015\/07\/16\/augment-photos-with-css3-matrix3d-transforms\/","title":{"rendered":"Augment Photos With CSS3 matrix3d() Transforms"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
22:00 \r\n 00<\/span><\/div>\r\n
Jul 24,2015<\/div>\r\n <\/div>\r\n<\/div>\r\n<\/div>\r\n

The image above has dynamic HTML content super-imposed on top of a photo, styled using CSS 3D transforms to give the appearance that it is part of the picture. If you are familiar with 3D transforms, you can imagine it would be very difficult to figure out what combination of translate3d()<\/code>, scale3d()<\/code> rotate3d()<\/code> functions will produce the pixel perfect effect needed. I knew it was possible to get exactly the shape needed using matrix3d()<\/code>, but that it would be a chore to calculate the numbers to do this by hand. For example, for the above example, we need the following CSS to style the digital watch face.<\/p>\n

\n
\r\ntransform: matrix3d(0.515078, -0.199333, 0, 0.00021, \r\n                    0.502268, 0.802615, 0, 0.00008, \r\n                    0, 0, 1, 0, 438, 240, 0, 1);\r\n\r\ntransform-origin: 0 0 0;\r\n<\/pre>\n<\/blockquote>\n
Unfortunately, those numbers aren’t the (x,y) coordinates for each of the corners of the transformed box that contains the date and time.  They are the values of a 4×4 matrix used in computer graphics to produce 3d effects<\/a>.<\/p>\n
If you have no idea how matrix arithmetic works and you don’t have a degree in math, you may think you are out of luck here.  However, I created a tool, The Matrix Construction Set<\/a>, to allow you to do this with a nice point and click GUI using HTML5 Drag and Drop.  Take a look at this video to see how easy it can be:<\/p>\n
\n
\n
\n
<\/div>\n<\/div>\n
A video posted by Zoltan "Du Lac" Hawryluk (@zoltandulac)<\/a> on 
Generate your own matrix3d() demos with The Matrix Construction Set<\/a><\/p>\n
The pink object represents the original HTML object without a transform applied, the purple one is the object transformed.  You can transform the object using the red crosshairs on the corner of the purple object.  As you do so, you will see the CSS above the grid change, giving you the correct matrix3d()<\/code>.  Click on the Show Advanced Features<\/strong> in the top nav and you’ll be able to edit the HTML and CSS of the transformed objects so you insert your own images, fonts and text.  When you are done, you can bookmark the page so you can share your proof-of-concept-creations with other developers and designers.  Here are a few examples of some stuff I have created with the tool (you can see the original, untransformed HTML by unchecking the Hide UI link in the tools main nav):<\/strong><\/p>\n\n\n\n\n
Retro TV<\/th>\nConstuctivist Building<\/th>\nAnimated Album Cover<\/th>\n<\/tr>\n<\/thead>\n
\n\"retro-tv\"<\/a><\/p>\n
This Matrix Animated GIF<\/a> is placed as a background image in a DOM element.  Along with the matrix3d()<\/code> used to give the illusion it is in the screen, I used a variation of the border-radius trick<\/a> to make HTML block the shape of a retro TV screen.<\/p>\n<\/td>\n
\n\"building\"<\/a><\/p>\n
It is now possible to float text on top of 3D objects, like JJ Abrams did on the TV show Fringe<\/em><\/a>.  The result is a look reminiscent of the Constructivist Art Movement<\/a> (Photo Credit: Hern\u00e1n Pi\u00f1era<\/a>)<\/p>\n<\/td>\n
\n\"eat-the-mint\"<\/a><\/p>\n
While we are talking about Constructivism, here is a animated version of a potential album cover of my band, Conflicting Plaid<\/a> spoofing Knigi<\/a> by Alexander Rodchenko<\/a>.<\/p>\n<\/td>\n<\/tbody>\n<\/table>\n
Difference Between matrix()<\/code> and matrix3d()<\/code><\/h2>\n
Note that the Matrix Construction Set has been around for a while for doing 2D matrix()<\/code>transforms. Over the years, Federico Brigante<\/a>, Gerard Delm\u00e0s<\/a> and others have requested a 3D version since the 2D matrix() function only allows you to manipulate three corners<\/strong> of a rectangle, while 3D ones allow manipulation of all four.<\/strong>  <\/p>\n
The one drawback is with matrix3d()<\/code> (and 3D transforms in general) is that a bitmap of the original, un-transformed object is transformed, including fonts.  2D transforms will transform typography’s vector data, resulting in crisper results:<\/p>\n\n\n\n\n\n
2D transform using matrix()<\/code><\/th>\n3D transform using matrix3d()<\/code><\/th>\n<\/tr>\n<\/thead>\n
\"2D\n<\/td>\n\n\"3D\n<\/td>\n<\/tbody>\n<\/table>\n
This can be worked around by making the original object (and typography) larger and then transforming it to a smaller object.  Here is the same example as above with the width<\/code>, height<\/code> and font-size<\/code> increased by 300%:<\/p>\n\n\n\n\n\n
3D transform on smaller object<\/th>\n3D transform on larger object<\/th>\n<\/tr>\n<\/thead>\n
\n\"3D\n<\/td>\n\"3D\n<\/td>\n<\/tbody>\n<\/table>\n
Fallbacks<\/h2>\n
Note also that IE9 and Opera Mini do not support 3D transforms<\/strong><\/a> (however, IE9 does support 2D transforms<\/em> using -ms-transform<\/code>).  In order to handle these browsers correctly, you should either ensure that the original untransformed object is positioned someplace that makes sense without the transform applied (this can be done in the tool by dragging the red object around, which adjusts the object’s transform-origin<\/code>).  You can also use Modernizr<\/a> to give alternate styles to browsers that don’t support 3D transforms if you want to get fancy.<\/p>\n
I know some of my readers might have expected a polyfill for older IE, since I’ve done some previous work supporting 2D transforms with<\/a> and without Javascript<\/a>.  There isn’t one that I know of, and I don’t think it can be done accurately, if at all.<\/p>\n
Other Caveats<\/h2>\n
    \n
  1. The Matrix Construction Set currently only works on Desktop web browsers, due to mobile browsers lacking support of the HTML5 Drag and Drop API<\/a>.  There is a polyfill that translates drag and drop events to touch events<\/a>, but unfortunately it doesn’t yet support offsetX\/Y and layerX\/Y<\/a>, which are needed for the pixel-precision this tool needs.  I may take a stab at adding this feature in the polyfill and updating the Matrix Construction Set with it in a future release.<\/li>\n
  2. The Matrix Construction Set is not supported in IE10, even though it does support 3D transforms.  The code it produces, however, will work in IE10 and above.<\/li>\n
  3. The tool only allows to insert a small subset of HTML in the transformed object, due to the dangers of XSS attacks by allowing arbitrary HTML.  The list of HTML tags supported can be seen in the Sanatize.js recipe that I use<\/a> to restrict the HTML devs can use in the tool.  If you want the tool to support more, please feel free to grab the source of the Matrix Construction Set<\/a> to add the support you wish on your own web server.<\/li>\n<\/ol>\n
    Further Reading<\/h2>\n