html - お互いを踏みつけずに異なるCSS変換を定義する方法

Question

あるクラスが要素に回転を追加し、別のクラスがスケールを追加する場合、それらを互いに踏みつけずにCSSで定義するにはどうすればよいですか。

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

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

上記の例では、クラス2の変換プロパティ定義がクラス1の変換プロパティ定義をオーバーライドするため、divはスケーリングされるだけです。これらの2つの異なるスタイルルールを取得して、これらの異なる変換を適用するにはどうすればよいですか？

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を使用するか、スパン内で1回使用する必要がある場合があります

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