使用CSS，x，y，left，right之间的差异

Question

我有一些看起来像这样的东西，它不应用x或y变换但是应用旋转。

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

这适用于x和y，但不适用于轮换：

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

如果我使用left和right进行操作

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

PS：我正在使用coffeescript

Answer 1

如果您问为什么left和right有效，x和y没有，那是因为您使用的是.css()最终设置CSS并且没有x或y CSS属性。

您可能正在寻找translate()：

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

Answer 2

您可以添加css对象，如下所示

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

有一个jQuery插件可以做css动画。

<强> Plugin Link

Answer 3

x，y不是有效的CSS属性。您应该使用left，top代替。

选中此jsFiddle