同时应用 CSS 变换缩放和旋转答案

【问题标题】：Applying CSS transform scale and rotate simultaneously同时应用 CSS 变换缩放和旋转
【发布时间】：2014-06-04 15:54:15
【问题描述】：

我有一个页面，其中包含可以缩放和旋转的图像。在此处查看示例：http://jsfiddle.net/viniciuspaiva/38AzW/

我对此使用了 CSS 转换，但旋转的按钮与应用缩放的按钮不同，因此我需要 CSS 以某种方式保存先前的状态（例如，缩放旋转的图像）。

我尝试了一种“蛮力”方法，创建了一个控制旋转的数据状态（0、1、2 或 3）属性和一个应用缩放的“缩放”类。但是当我缩放时，我无法保持旋转。

我还尝试创建大量 CSS 来防止所有情况，例如下面的示例，但没有奏效。

.zoom [data-state='0']{  
transform: scale(1.3) rotate(0deg);
  -ms-transform: scale(1.3) rotate(0deg); /* IE 9 */
  -moz-transform: scale(1.3) rotate(0deg); /* Firefox */
  -webkit-transform: scale(1.3) rotate(0deg); /* Safari and Chrome */
  -o-transform: scale(1.3) rotate(0deg); /* Opera */
}

[data-state='0']{  
  transform: rotate(0deg);
  -ms-transform: rotate(0deg); /* IE 9 */
  -moz-transform: rotate(0deg); /* Firefox */
  -webkit-transform: rotate(0deg); /* Safari and Chrome */
  -o-transform: rotate(0deg); /* Opera */
}

【问题讨论】：

看起来你使用的是内联脚本，那为什么不正常使用脚本呢？纯 CSS 解决方案可能需要您使用一些可以记住状态的元素，例如复选框、单选按钮。
下次请正确标记。还要避免使用内联脚本，这只是一团糟（不是专业风格）
为什么不用JS？这会更容易用 JS 处理数据/状态，并且只使用 CSS 来制作实际的动画。
@Ennui 实际上他在这里使用了 JS，但它是内联脚本。应该避免。否则我认为在这里找到一些纯 CSS 解决方案并不容易（但并不意味着不可能）。

标签： javascript html css transform

【解决方案1】：

这只是你这边的语法错误，不应该有空格：

.zoom[data-state='1']{  
  transform: rotate(90deg) scale(1.3);
  -webkit-transform: rotate(90deg)  scale(1.3); 
}

.zoom[data-state='2']{  
  transform: rotate(180deg) scale(1.3);
  -webkit-transform: rotate(180deg)  scale(1.3); 
}
.zoom[data-state='3']{  
  transform: rotate(270deg) scale(1.3);
  -webkit-transform: rotate(270deg)  scale(1.3); 
}

你使用的选择器

.zoom [data-state='1'] {}

指的是作为缩放元素的子的数据状态元素

updated fiddle

【讨论】：

你检查过小提琴吗？那里的代码不同。您是否还检查过它是否确实适用于此更改？这里比较难理解的是 OP 使用 inline-script，也就是说这里需要脚本，所以我们可以把所有的脚本放在一个地方，如果我们使用脚本，这个问题只是一个琐事。
@KingKing 内联脚本用于添加缩放类和数据状态值。这些在 CSS 中被引用。添加了该解决方案的小提琴。当然，您可以完全采用内联样式方式，但我遵循的是 OP 选择的方向。他离解决方案只有一个空间:-)
我明白为什么需要这个脚本，但是由于它的内联样式，我什至没有仔细研究它们，这样写脚本太糟糕了。这就是为什么我要求 OP 为什么是内联脚本？如果他将所有脚本放在某个地方，就好像他想要一些 script 解决方案。然而，他甚至没有用像 jQuery 或 javascript 这样的脚本来标记他的问题。所以我怀疑他可能想要一些纯 CSS 解决方案，（他可能认为他的代码看起来像无脚本代码，但实际上它需要脚本才能运行）。
@KingKing 我绝对同意内联脚本可怕
谢谢，解决了！糟糕，糟糕的空间。内联脚本的原因是它是一个仍在进行中的解决方案，我这样做只是为了看看是否有人参加。现在我要重构它！ =)

【解决方案2】：

我想这就是你想要的：http://jsfiddle.net/38AzW/1/

我只在你的课堂上添加了以下内容center

css:

-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;

【讨论】：

不，OP 不想要过渡（或者至少如果他愿意，他知道这一点），他想要旋转和缩放的某种组合，但每个按钮都有自己的功能，一个用于旋转，一个用于缩放，缩放不应清除/重置旋转，反之亦然。