Html 如何定义不同的CSS转换而不互相践踏

如果一个类为元素添加旋转，另一个类为元素添加缩放，我如何在CSS中定义这些旋转，而不让它们互相踩踏

<!-- HTML snippet -->
<div class="class1 class2"></div>

/* CSS snippet */
.class1 { transform:rotate(45deg); }
.class2 { transform:scale(0.5); }

/*CSS片段*/
.class1{变换：旋转（45度）；}
.class2{变换：比例（0.5）；}

在上面的示例中，div只会被缩放，因为class2中的变换特性定义覆盖了Class1中的变换特性定义。

---

如何让这两种不同的样式规则应用这些不同的转换？

不幸的是，我认为您需要按照

<div class="class1"><span class="class2"></span></div>

CSS

HTML

您可能需要使用2个div，或者在span内使用一次

/* CSS snippet */
.class1 { transform:rotate(45deg); }
.class1.class2 { transform:scale(0.5); }

---

我试过了，效果很好。我认为它只需要添加旧的浏览器前置关键字

.class1{-moz-transform: rotate(20deg);
-wibkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg)}

.class2{-moz-transform: scale(.5);
-webkit-transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5)}

---

谢谢，Abolfazi，但我的目标是Windows 8，所以我不需要担心浏览器兼容性。你实现了吗？我确信2级的比例会超过1级的旋转。结果将只是一个缩放变换。这将起作用，但它要求定义缩放的CSS样式表知道定义旋转的CSS样式表。如果不踩踏其他CSS库可能执行的其他转换，是否无法定义元素的比例？我想我可以使用JS附加到样式规则的属性值。@JackFlint您可以使用jquery的addClass（'class2'）和removeClass（'class2'）来实现您想要的功能。

/* CSS snippet */
.class1 { transform:rotate(45deg); }
.class1.class2 { transform:scale(0.5); }

.class1{-moz-transform: rotate(20deg);
-wibkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg)}

.class2{-moz-transform: scale(.5);
-webkit-transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5)}