x，y，左，右与CSS的区别

Question

I have something that looks like this, which doesn't apply the x or y transform but does apply rotation.

$('<div/>').css(
   "-webkit-transform": "rotate(20deg)"
   x: 10
   y: 10
)

This applies the x and y but not the rotation:

$('<div/>').css(
  "-webkit-transform": "rotate(20deg)"
  x: 10
  y: 10
)

If I do it with left and right it works

$('<div/>').css(
   "-webkit-transform": "rotate(20deg)"
   left: 10
   right: 10
)

PS: I'm using coffeescript

Answer 1

If you're asking why left and right work but x and y don't, it's because you're using .css() which is ultimately setting CSS and there is no x or y CSS properties.

You're probably looking for translate() :

-webkit-transform: translate(50px,100px);

Answer 2

You can add css object as below,

$('<div/>').css({
   "-webkit-transform": "rotate(20deg)"
   x: 10
   y: 10
});

there is one jQuery plugin that do css animation.

Plugin Link

Answer 3

x , y are not valid CSS attributes. You should use left , top instead.

Check this jsFiddle