html - 如何定义不同的 CSS 转换而不互相踩踏

Question

如果一个类为元素添加了旋转，而另一个类添加了比例，我如何在 CSS 中定义它们而不会使它们相互踩踏。

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

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

在上面的示例中，div 只会被缩放，因为 class2 中的 transform 属性定义覆盖了 class 1 中的属性。如何获得这两种不同的样式规则来应用这些不同的转换？

Answer 1

不幸的是，我相信您将需要按照以下方式做一些事情

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

Answer 2

演示

CSS

 .class1 {
        margin-top:100px;
        width:100px;
        height:30px;
        background-color:#000;
        transform:rotate(45deg);
    } .class2 {
         width:100px;
        height:30px;
        background-color:#00f;
        transform:scale(0.5);
    }

HTML

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

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

您可能必须使用 2 个 div 或一次在 span 内

Answer 3

尝试

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

Answer 4

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

.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)}