search

rstacruz / jquery.transit

Super-smooth CSS3 transformations and transitions for jQuery
http://ricostacruz.com/jquery.transit
7.29k stars 864 forks source link

translateZ #117

Open scien opened 11 years ago

scien commented 11 years ago

local updates...

1.

registerCssHook('z', true);

2.

z: function(z) {
  this.set('translate', null, null, z);
},

3.

if (this._translateZ === undefined) { this._translateZ = 0; }
if (z !== null && z !== undefined) { this._translateZ = unit(z, 'px'); }
this.translate = this._translateX + "," + this._translateY + "," + this._translateZ;

4.

re.push(i + "3d(" + this[i] + ")");

5.

elem.style[support.transform] = value.toString(true);

I've seen the note about scaling in chrome, so point 5 here definitely shouldn't go into prod. I just wanted to keep it simple. ideally this should do something smarter with translate vs translate3d.

Just to note: chrome 25 seems to be handling 3d translations just fine. could either use this code and have the true argument only affect scaling, or as in the last paragraph, know when to use translate(x, y) vs translate3d(x, y, z)

Thoughts?

scien commented 11 years ago

note: reason for the request...

Safari 5.0.5 isn't handling z-index correctly inside a transformed element (parent is using scaling, children z-indexes are being ignored). By using translate3d(x, y, z-index), all the layering is correct on Safari 5.0.5.

scien commented 11 years ago

looks like this pull request would resolve this issue https://github.com/rstacruz/jquery.transit/pull/104