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

DEMO

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或一次跨度

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

如何定义不同的CSS变换而不相互踩踏

4 个答案: