Comments on: Cross Browser CSS Transforms – even in IE

By: Ralph Krausse

Ralph Krausse — Mon, 19 Dec 2011 13:35:16 +0000

Actually I mistyped. I was going to say it doesn’t. Well you are right, it does BUT the link itself isn’t over the rendered link. If you don’t mind, email me and I will email you image and source so you can see. The mouse changes (to the link cursor) above the rendered link.

thx
r

By: zoltan

zoltan — Sat, 17 Dec 2011 18:20:17 +0000

@Ralph: If you are asking if it can transform tags, then yes, it does.

By: Ralph Krausse

Ralph Krausse — Sat, 17 Dec 2011 16:33:05 +0000

Does look like -sand-transform supports hrefs… Is that correct?

By: Barney

Barney — Thu, 15 Dec 2011 17:05:26 +0000

Zoltan, this work is a triumph. Well done on nailing a polyfill for rotation that addresses the IE origin problem successfully — many have produced otherwise impressive solutions but failed on this point, and there is a sorry history of ambitions to patch this that have fallen by the wayside…

I am currently working on a project with a complex rotation-based layout and interactions (a very elaborate GUI; not necessarily that intuitive ;). For this I am using your script collection and applying the transformations dynamically based on the necessary calculations, then copying the rendered styles and writing them into static CSS for the production site: toggling classes will determine changed states, and CSS transitions will cater for animation (several crashes in, I have concluded that JS-interval-animating filters is incredibly dangerous).

PNGs & GIFs:
For the purposes of my design, it’s necessary to use several overlayed transparent images. This IS possible by specifying the AlphaImageLoader filter BEFORE the matrix filter (although the anti-aliasing suffers from cludgy pixel rasterising).

Once again, immense thanks for your hard work on something I simply couldn’t get my head around.

By: zoltan

zoltan — Sun, 11 Dec 2011 17:21:15 +0000

@re5set: To exclude a stylesheet from being parsed by cssSandpaper (like one that is not on the same domain as the html) just add a class of cssSandpaper-noIndex to the link or style tag.

By: re5et

re5et — Fri, 09 Dec 2011 09:33:48 +0000

Hey, first of all thanks for the great work you’ve done! I’m having troubles using sandpaper on a website I’m working on, since there’s quite a few external stylesheets in use (addthis, google fonts, etc..) which causes the browser to throw an “XMLHttpRequest Exception 101″. Is there any way to explicitly include or exclude certain stylesheets from parsing? Or any other workaround for this problem?
Thanks in advance!

By: zoltan

zoltan — Fri, 02 Dec 2011 05:29:37 +0000

@Maksim: Sorry … not update on that yet. It may be that PNG transparencies are not possible in transformed objects in IE using cssSandpaper due to limitations of IE’s Matrix Filter. . :-(

By: zoltan

zoltan — Fri, 02 Dec 2011 05:28:00 +0000

Take a look at the companion article Cross-Browser Animated CSS Transforms — Even in IE. Note that this solution does not use jQuery syntax. jQuery support is something that I am currently working on, and I will post on my blog when that is complete.

By: westine

westine — Fri, 02 Dec 2011 05:21:38 +0000

Hi, how can I dynamically transform my css class using “-sand-transform:rotate(90deg)”?
I have tried this line while .tickLabel is my div class
$(“.tickLabel”).css({“-sand-transform”:”rotate(90deg)”});
It does not work.
Please help, thanks in advance.

By: Maksim

Maksim — Tue, 29 Nov 2011 15:28:55 +0000

Amazing lib, Zoltan!
Everything works very smoothly, but having same issue with PNG transparency and no luck with fixing it. Do you have any updates on that?