3

div要素に対して一度に複数の変換（回転、移動など）を許可したい。

次のコードを使用して、1つの変換（最初の変換）のみが適用されるため、これを行うことができないようです。

<!DOCTYPE html>
<html>
    <head>
    <style> 
        div {
            width:100px;
            height:75px;
            background-color:#FFCC00;
            border:1px solid black;
        }

        div#div2 {
            transform:rotate(45deg);
            -ms-transform:rotate(45deg); /* IE 9 */
            -moz-transform:rotate(45deg); /* Firefox */      
            -webkit-transform:translate(50px,100px); /* Safari and Chrome */
            -webkit-transform:rotate(45deg); /* Safari and Chrome */
            -o-transform:rotate(45deg); /* Opera */
        }

    </style>
    </head>
<body>
    <div>This is a DIV element.</div>
    <div id="div2">This is a DIV element + Transformation</div>
</body>
</html>

Chromeでテストしたところ、回転のみが影響を受け、最初に（回転の前に）配置されていても、移動は効果がありません。

4

2 に答える 2

2

の正式な文法transformは次のとおりです。

transform: <transform-function> [<transform-function>]* | none

複数の変換を実行するには、変換関数を連結する必要があります。

-webkit-transform: translate(50px,100px) rotate(45deg);
-moz-transform: translate(50px,100px) rotate(45deg);
-ms-transform: translate(50px,100px) rotate(45deg);
-o-transform: translate(50px,100px) rotate(45deg);
transform: translate(50px,100px) rotate(45deg);

これは、コードに基づいたjsFiddleのライブデモです。

参考文献

于 2013-01-01T16:21:20.577 に答える
1

属性は一意であり、関数への順次呼び出しのようには機能しません。前の定義をオーバーライドするだけです。したがって、次のように1回のショットで変換を行う必要があります（Firefox 17でテスト済み）。

transform:rotate(45deg) translate(50px,100px);
于 2013-01-01T16:20:31.360 に答える