Not sure what can be causing this, but transparent png's when scaled get this weird black shadow on the transparent areas. Any idea of what might be?

Thanks!

The demo runs the first animation, but doesn't "rollback" on mouseout.
I have a similar problem (first anim is run, but not the second) on my production env and testcase (http://jsfiddle.net/qGEmy/7/) .

(IE 9.0.8112)

Hey, was wondering if you have any plans of adding animation support for rotateX or rotateY to the 3d transform library? Would be extremely useful!

Thanks and awesome library.

It would be easier to use this plugin with Bower if it had tagged releases.

How can I set the "transform-origin" property?

Just like the title says. I do off canvas type animations moving things out and then back into the viewport using percentage values from time to time. Would be great to accept percentage values for transforms instead of just pixels.

When I rotate element from 180deg to 270deg it rotates anticlockwise instead of clockwise. Also when I rotate from 360deg to 450deg it makes full circle before rotating 90 deg. It looks weird. If you fix this bug, it will be great.
Thanks.

Please change version from 1.0 to 1.0.0 in package.json to fix NPM error

On IE8 (genuine IE8 not IE9+ in IE8 mode, windows 7), the four simple demos on your demo page don't run, and this error is in the console:

The 'Advanced usage' demos do seem to work, however.

I tried making my own demo on jsbin and it fails with identical errors: http://jsbin.com/ejiqov/1

[Strangely, after the first time I ran the script, it stopped failing with an error message - but started failing by ignoring the top: and left: values set by CSS. Edit- this second sub-issue can be solved by applying the positioning to an outer wrapper element and then applying the rotation to an inner element - but it would be nice if the transform calculation could take existing CSS top:, left: etc into account - working demo here http://jsbin.com/ejiqov/3 ]

http://jsfiddle.net/EvsVJ/

When you switch to the newer version of the plugin, css() works but the subsequent animate() does not. I have only noticed this wackiness when dealing with rotate—scaleX and translate (the other ones I have tried) have animated just fine.

Using transform: 'translate(0, -50%)', is replaced to transform: 'translate(0, -50px)',

On IE9, the following works as expected:

$(elem).css({transform: "scale(0.5, 1)"})

But, the following produces no results:

$(elem).animate({transform: "scale(0.5, 1)"})

(This works in Firefox, Safari, and Chrome, just not IE 9.)

I've tested this with both JQuery 1.6.2 and JQuery 1.7.

When I scale down, the content get's pushed down.

When I scale up, the content get's pushed up past the top of the div.

Is there a way to make the content get pushed to the top of the div?

Also, is there a way to disable the use of the scalable content moving left and right when zoomed in?

$($0).animate({transform: '+=translateX(90px)'}) work
but
$($0).css({transform: '+=translateX(90px)'}) not work！

Hey, maintainer(s) of louisremi/jquery.transform.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library louisremi/jquery.transform.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "louisremi/jquery.transform.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

This library is an awesome!

But, this libray is not support tranform3d property.
to improve performance, I use a translate3d property frequently.

Do you have a special reason that not support transform3d property?
Do you have a plan to support transform3d property?

Hello,

I'd just like to tell that the demo site at https://louisremi.github.com/jquery.transform.js/index.html seems to be broken due to asset import on http (mixed protocols). Obviously just when visited on https.

Cheers :)

I have a slider with multiple slides that I wan't to scale on window.resize. The problem is with IE8. On all other browsers, including IE7, when the #slider_wrap is scaled, its children are scaled as well.
But on IE8, when I apply the scale transform only the #slider_wrap is resized, none of its children.
After some debugging I found that this happens if any of the children are relatively or absolutely positioned. When all the position rules are removed from children, the scale transform works, but it breaks my slider layout.
This is my slider layout:
#slider_wrap(absolute)
#slider(relative)
#slides(relative)
.slide(absolute)
I must remove all the positioning below #slider_wrap to get scale to work. Is there any help, other than reworking this custom slider that we use?

"skew" has been removed for the list of transform functions and this evolution in the spec has already been followed by Mozilla in Firefox Nightly: http://t.co/Wq1eaGtr

As a consequence, jquery.transform2d.js is broken in this browser.

If you use this script, you should be concerned!
You can help me solve this problem by posting a link to your website here.

I'll update my plugin, before the end of the week hopefully.

See:
http://janne.aukia.com/htmltests/louisremi-tf-test/test-2.html

Actually, I totally lied with my previous comment. I made a mistake while linking from my Dropbox account and did not include the latest version.

Currently-existing filters are still over-written in IE<9: http://jsfiddle.net/22Nac/

I cannot get relative transformations working with the light-version. With the non-light version it works fine.

If I first do

#myDiv{
  transform: "scale(0.3)";
}

and then do

var current = $("#myDiv").css("transform");
$("#myDiv").animate({transform: current+"scale(2)"});

the div jumps to original size and is then scaled to double size, instead of being scaled from 0.3 to 0.6.

Chrome Dev/Safari 5.1 OS X Lion, JQuery 1.6.2

In this example : http://jsfiddle.net/qGEmy/7/ , animating with delay=0 does fail. Using another value, even null, does work.

Steps to reproduce:

1. go to:
   http://janne.aukia.com/htmltests/louisremi-tf-test/test-3.html

2. click on "Animate with jQuery.transform" and wait for the animation to finish

3. click again on the "Animate with jQuery.transform" button

-> compare the result to the same with "Animate with Css"

suffix = propertyName[0].toUpperCase() + propertyName.slice(1),

IE<8 doesn't support treating strings like arrays, throwing undefined.

Setting suffix to simply 'Transform' fixes this and everything works awesome (amazing job!), but I assume there's a bigger reason why you defined it this way.

Is it possible that the pictures only move on a horizontal line and not up/down on the vertical line?
So that "liked" is only on the right frame (not upper right or bottom right) and "nope" only on the left side…
And second: I don't need the skewing of the pics, how can I get rid of it?

Thx for any help!

the old jquery.transform.light.js works good but this new version with transform2d and transform3d doesn't work for me... it works when I assign css with jquery but with animate it only does the first animation not the subsequent changes...

$ bower install jquery-transform
bower cached        git://github.com/louisremi/jquery.transform.js.git#fd77c2207b
bower validate      fd77c2207b against git://github.com/louisremi/jquery.transform.js.git#*
bower not-cached    git://github.com/jquery/jquery.git#1.42
bower resolve       git://github.com/jquery/jquery.git#1.42
bower ENORESTARGET  No tag found that was able to satisfy 1.42

Presumably that should be 1.4.2 (or 1.4.3, to match package.json).

I you rotate an input box and you then try to get its new position using $(element).position().top or $(element).offset().top it will return the original position vs in IE and Chrome it will give you the new position.

Here is an example: http://jsfiddle.net/shrage/Xv39G/
Click on animate
Then click on "Left position of animate button" and you will see that it returns 18px which is the left position of the buttons original place. in chrome it will give you 400 which is the new position of the button after rotation.

file: jquery.transform.js
line: 185
pos: 50

deleting and adding new whitespace fixes.

Error: missing ; before statement
SRC: jquery.transform.js
ROW: 178, COL: 51
Source:
propertyGet = propertyHook && propertyHook.get ||Â $.css;

Might be confusing to have the same lib name (although naming collisions are difficult to avoid):
https://github.com/heygrady/transform

-janne

Is it possible to have some kind of callback functions, fired when the animation is complete?

See the following demo (angles of the resulting skew differ):
http://janne.aukia.com/htmltests/louisremi-tf-test/test-1.html

Having some trouble getting this working in IE8 and 9.

At the moment I've got it working perfectly in IE6/7, Chrome and Firefox. I'm creating an outer element for positioning (a list-item set to absolute) and I have an inner div that I apply the actual transformations to.

For some reason, the transform are not applied at all in IE8. I've uploaded two screenshots, the first is the transform working in IE9:

http://www.richardson.co.nz/bugs/working.png

and not working in IE8

http://www.richardson.co.nz/bugs/not_working.png

Secondly, the animations don't seem to be working in IE9. The regular jQuery animations work but the scale animation doesn't.

The code I use to initially place the items is as follows.

        // set position and scale of each of the panel items
        this.each(function(count, element, index, scale, left, zIndex) {
            var $element = $(element);

            // set position
            $element.css({
                position: "absolute",
                left: left,
                zIndex: zIndex
            });

            $element.find('.transform').css({
                transform: "scale(" + scale  + ")"
            }, {preserve: true});

        });

The code to animate the panels:

        this.each(function(count, element, index, scale, left, zIndex) {
            var $element = $(element);

            $element.css({
                zIndex: zIndex,
                display: 'block'
            });

            $element.animate({
                left: left
            }, {queue: false});

            $element.find('.transform').animate({
                transform: "scale(" + scale  + ")"
            }, {queue: false, preserve: true});

            if (this.isVisible(this.normaliseOffset(index))) {
                $element.css({display: 'block'});
            } else {
                $element.css({display: 'none'});
            }

        });

The HTML for a sample panel:

                        <li class="randomise">
                            <div class="transform">
                                <div class="image"><a data-reveal-id="modalVideo" href="#"><img src="static/strucimages/v2/homepage/things_to_do/1.jpg" alt="Youthfull Travellers"></a></div>
                                <div class="caption">
                                    <h4><a data-reveal-id="modalVideo" href="#">Video Item</a></h4>
                                    <p><a data-reveal-id="modalVideo" href="#">Choose Australia for a gap year, career break, or overseas study</a></p>
                                </div>
                            </div>
                        </li>

I have requested your plugin to be added to CDNJS. Is there any way you could update this repo with a version number tag to satisfy their requirements?

When running it with multiple animations, sometimes it doesn't execute the other animations, in this case the animation top

i've a code like this

var mypath = $("#myid");
mypath.stop().animate({top:0, transform: 'scaleX(2) scaleY(2)'},{queue:true, duration:400, specialEasing: {top:'easeOutExpo', transform:'easeOutExpo'}});

gives same problem with
var mypath = $("#myid");
mypath.stop().animate({transform: 'scaleX(2) scaleY(2)'},{queue:false, duration:400, specialEasing: {transform:'easeOutExpo'}});
mypath.animate({top:0},{queue:false, duration:400, specialEasing: {top:'easeOutExpo'}});

i've also tried another plugin like this, it gives same problem... any thoughts?

On line 134 in transform.lite.js and line 151 in transform.js there appears to be a non-printable character (shows up as a space) between the '||' and 'elemStyle.filter'. It caused the plug-in to not work until I removed them. You might want to edit the plug-in.

-Anthony

The rotate transform isn't working for me in IE8. It does work in IE9 and FireFox.

Example here: http://jsfiddle.net/E9vfj/

I had to inline jquery.transform.js to get it to work in the fiddle. This isn't necessary outside the fiddle.