CSS 转换被覆盖答案

【问题标题】：CSS transform gets overwrittenCSS 转换被覆盖
【发布时间】：2015-10-03 01:16:12
【问题描述】：

我面临以下问题：

我有 2 个函数将 css 转换应用于元素（使用 jquery），彼此不知道任何内容并在不同时间调用。

但是它们都互相覆盖。

可以在here 找到一个示例。当您单击旋转链接时，翻译将被覆盖，仅应用旋转。但是我想保留这两个转换。

我认为这不是一个 jquery 错误，但我怎样才能让它工作，这样它们就不会互相覆盖？

box.css({
'-ms-transform': 'translate(50px,100px)', /* IE 9 */
'-webkit-transform': 'translate(50px,100px)', /* Safari */
'transform': 'translate(50px,100px)'
});

rotateIt.on('click', function() {
 box.css({
  '-ms-transform': 'rotate(45deg)', /* IE 9 */
  '-webkit-transform': 'rotate(45deg)', /* Safari */
  'transform': 'rotate(45deg)'
 });
});

【问题讨论】：

您必须将这两种转换结合起来。它不是 CSS 或 jQuery 错误。也就是说，点击时您必须将其设置为'transform': 'translate(50px,100px) rotate(45deg)'。
我明白我应该这样做，我的问题是我有 2 个独立的函数应用这些样式。他们没有任何联系。在这种情况下有解决方法吗？
检查this 是否有帮助。我认为没有任何替代方法可以获取当前变换值并将新变换附加到它。或者，您也可以参考this。
@RVandersteen 你是说你不能改变功能吗？在这种情况下，没有解决办法。放弃吧。
好吧，我想让它们分开，因为它们会对不同的事件做出反应。我想在重新应用之前我必须将当前的转换（字符串）保留在一个变量中并附加到它

标签： jquery css transform

【解决方案1】：

如果这两个类属于同一元素，您显然会用 other 覆盖 transform 属性。

要同时使用变换rotate 和translate，您可以这样做

yourSelector{ 变换：旋转（45度）翻译（50px，100px）； }

在你的情况下试试这个

rotateIt.on('click', function() { 盒子.css({ '-ms-transform': 'rotate(45deg)', /* IE 9 */ '-webkit-transform': 'rotate(45deg)', /* Safari */ “变换”：“平移（50 像素，100 像素）旋转（45 度）” }); });

【讨论】：

是的，但我想知道如果你在编写程序时不知道下一步是什么变换会发生什么。