Skip to content

Commit

Permalink
Update both 2d and 3d scripts following changes in spec and Mozilla's…
Browse files Browse the repository at this point in the history 
… implementation:

- `skew` function has been removed
- units in `matrix3d` are forbidden
  • Loading branch information
@louisremi
louisremi committed Apr 14, 2012
1 parent ebfe100 commit 413a52e
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 46 deletions.
32 changes: 11 additions & 21 deletions jquery.transform2d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,17 +241,17 @@ $.fx.step.transform = function( fx ) {
unit = "px";
case _scale:
unit || ( unit = " ");
case _skew:
unit || ( unit = "rad" );

transform = startVal[0] + "(" +
Math.round( (startVal[1][0] + (endVal[1][0] - startVal[1][0]) * pos) * precision ) / precision + unit +","+
Math.round( (startVal[1][1] + (endVal[1][1] - startVal[1][1]) * pos) * precision ) / precision + unit + ")"+
transform;
break;

case _skew + "X":
case _skew + "Y":
case _rotate:
transform = _rotate + "(" +
transform = startVal[0] + "(" +
Math.round( (startVal[1] + (endVal[1] - startVal[1]) * pos) * precision ) / precision +"rad)"+
transform;
break;
Expand Down Expand Up @@ -339,12 +339,6 @@ function matrix( transform ) {
curr[1] = Math.tan(toRadian(val));
break;

case _skew:
val = val.split(",");
curr[2] = Math.tan(toRadian(val[0]));
val[1] && ( curr[1] = Math.tan(toRadian(val[1])) );
break;

case _matrix:
val = val.split(",");
curr[0] = val[0];
Expand Down Expand Up @@ -399,8 +393,6 @@ function unmatrix(matrix) {
skew /= scaleY;
// step (6)
if ( A * D < B * C ) {
//scaleY = -scaleY;
//skew = -skew;
A = -A;
B = -B;
skew = -skew;
Expand All @@ -418,7 +410,7 @@ function unmatrix(matrix) {
return [
[_translate, [+matrix[4], +matrix[5]]],
[_rotate, Math.atan2(B, A)],
[_skew, [Math.atan(skew), 0]],
[_skew + "X", Math.atan(skew)],
[_scale, [scaleX, scaleY]]
];
}
Expand Down Expand Up @@ -476,20 +468,18 @@ function parseFunction( type, value ) {
var
// default value is 1 for scale, 0 otherwise
defaultValue = +(!type.indexOf(_scale)),
// value is parsed to radian for skew, int otherwise
valueParser = !type.indexOf(_skew) ? toRadian : parseFloat,
scaleX,
cat = type.replace( /[XY]/, "" );
// remove X/Y from scaleX/Y & translateX/Y, not from skew
cat = type.replace( /e[XY]/, "e" );

switch ( type ) {
case _translate+"Y":
case _scale+"Y":
case _skew+"Y":

value = [
defaultValue,
value ?
valueParser( value ):
parseFloat( value ):
defaultValue
];
break;
Expand All @@ -499,17 +489,17 @@ function parseFunction( type, value ) {
case _scale+"X":
scaleX = 1;
case _scale:
case _skew+"X":
case _skew:

value = value ?
( value = value.split(",") ) && [
valueParser( value[0] ),
valueParser( value.length>1 ? value[1] : type == _scale ? scaleX || value[0] : defaultValue+"" )
parseFloat( value[0] ),
parseFloat( value.length>1 ? value[1] : type == _scale ? scaleX || value[0] : defaultValue+"" )
]:
[defaultValue, defaultValue];
break;

case _skew+"X":
case _skew+"Y":
case _rotate:
value = value ? toRadian( value ) : 0;
break;
Expand Down
3 changes: 0 additions & 3 deletions jquery.transform3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,6 @@ while ( j-- ) {
/matrix\([^)p]*\)/.test(value) && (
value = value.replace(/matrix((?:[^,]*,){4})([^,]*),([^)]*)/, "matrix$1$2px,$3px")
);
/matrix3d\([^)p]*\)/.test(value) && (
value = value.replace(/matrix3d((?:[^,]*,){13})([^,]*),([^,]*),([^,]*)/, "matrix3d$1$2px,$3px,$4px")
);
elem.style[property] = value;
}
});
Expand Down
26 changes: 13 additions & 13 deletions test/transform2d.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ <h2><code>$elem.css("transform", "rotate(45deg)");</code></h2>
<div id="test1" class="rslt"></div>
<script>$("#test1").css("transform", "rotate(45deg)");</script>

<h2><code>$elem.css("transform", "skew(30deg, 10deg)");</code></h2>
<div class="ref" style="-moz-transform: skew(30deg, 10deg)"></div>
<h2><code>$elem.css("transform", "skewX(30deg) skewY(10deg)");</code></h2>
<div class="ref" style="-moz-transform: skewX(30deg) skewY(10deg)"></div>
<div id="test2" class="rslt"></div>
<script>$("#test2").css("transform", "skew(30deg, 10deg)");</script>
<script>$("#test2").css("transform", "skewX(30deg) skewY(10deg)");</script>

<h2><code>$elem.css("transform", "scale(2, .5)");</code></h2>
<div class="ref" style="-moz-transform: scale(2, .5)"></div>
Expand Down Expand Up @@ -76,33 +76,33 @@ <h2><code>$elem.css("transform", "rotate(45deg) translate(38px)");</code></h2>
</div>
<script>$("#test6").css("transform", "rotate(45deg) translate(38px)");</script>

<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
<div class="relative">
<div id="test7" class="rslt absolute"></div>
</div>
<script>$("#test7").css("transform", "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</script>
<script>$("#test7").css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</script>

<h2><code>$elem.animate({"transform": "rotate(45deg)"});</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg)"></div>
<div id="test8" class="rslt"></div>
<script>later('$("#test8").animate({"transform": "rotate(45deg)"})');</script>

<h2><code>$elem.animate({"transform": "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
<h2><code>$elem.animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
<div class="relative">
<div id="test9" class="rslt absolute"></div>
</div>
<script>later('$("#test9").animate({"transform": "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)"})');</script>
<script>later('$("#test9").animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)"})');</script>

<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2)").animate({"transform": "+=rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2)");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2)"></div>
<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)").animate({"transform": "+=rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)"></div>
<div class="relative">
<div id="test10" class="rslt absolute"></div>
</div>
<script>
$("#test10").css("transform", "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2)");
later('$("#test10").animate({"transform": "+=rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2)"})');
$("#test10").css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)");
later('$("#test10").animate({"transform": "+=rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)"})');
</script>
</body>
</html>
18 changes: 9 additions & 9 deletions test/transform3d.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ <h2><code>$elem.css("transform", "rotate(45deg)");</code></h2>
<div id="test1" class="rslt"></div>
<script>$("#test1").css("transform", "rotate(45deg)");</script>

<h2><code>$elem.css("transform", "skew(30deg, 10deg)");</code></h2>
<div class="ref" style="-moz-transform: skew(30deg, 10deg)"></div>
<h2><code>$elem.css("transform", "skewX(30deg) skewY(10deg)");</code></h2>
<div class="ref" style="-moz-transform: skewX(30deg) skewY(10deg)"></div>
<div id="test2" class="rslt"></div>
<script>$("#test2").css("transform", "skew(30deg, 10deg)");</script>
<script>$("#test2").css("transform", "skewX(30deg) skewY(10deg)");</script>

<h2><code>$elem.css("transform", "scale(2, .5)");</code></h2>
<div class="ref" style="-moz-transform: scale(2, .5)"></div>
Expand Down Expand Up @@ -77,12 +77,12 @@ <h2><code>$elem.css("transform", "rotate(45deg) translate(38px)");</code></h2>
</div>
<script>$("#test6").css("transform", "rotate(45deg) translate(38px)");</script>

<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
<div class="relative">
<div id="test7" class="rslt absolute"></div>
</div>
<script>$("#test7").css("transform", "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</script>
<script>$("#test7").css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</script>

<h2><code>$elem.css("transform", "rotateZ(45deg)");</code></h2>
<div class="ref" style="-moz-transform: rotateZ(45deg)"></div>
Expand All @@ -104,12 +104,12 @@ <h2><code>$elem.animate({"transform": "scale(.5,1)"});</code></h2>
<div id="test11" class="rslt"></div>
<script>later('$("#test11").animate({"transform": "scale(.5,1)"})');</script>

<h2><code>$elem.animate({"transform": "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
<h2><code>$elem.animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}");</code></h2>
<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
<div class="relative">
<div id="test12" class="rslt absolute"></div>
</div>
<script>later('$("#test12").animate({"transform": "rotate(45deg) translateY(-68px) skew(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)"})');</script>
<script>later('$("#test12").animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)"})');</script>

</body>
</html>

0 comments on commit 413a52e

Please sign in to comment.