web-dev-qa-db-ja.com

CSSで複数の変換を適用する方法

CSSを使用して、どうやって複数のtransformを適用できますか？

例：以下では、平行移動のみが適用され、回転は適用されません。

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}
csscss3transform
476
Ben

このようにそれらを一行に入れる必要があります。

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

複数のtransformディレクティブがある場合は、最後のものだけが適用されます。他のCSS属性と同じです。

複数変換の1行ディレクティブは右から左に適用されるです。

これ：transform: scale(1,1.5) rotate(90deg);
and：transform: rotate(90deg) scale(1,1.5);

notは同じ結果になります： https://jsfiddle.net/k3vfLu24/1/ /

802
lukad

私はこの答えを追加しています。それが役に立つと思われるからではなく、それが本当だからです。

連鎖して複数の翻訳を作成する方法を説明した既存の回答を使用することに加えて、 自分で4×4行列を構築する もできます。

回転行列を示す グーグル中に見つけたランダムなサイト から以下の画像を取得しました。

X軸周りの回転： Rotation around x axis
y軸周りの回転： Rotation around y axis
z軸周りの回転： Rotation around z axis

私は翻訳の良い例を見つけることができませんでした。

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

もっと詳しく説明している Pragamatic CSS 3チュートリアル と同様に、 変換に関するウィキペディアの記事 を参照してください。任意の回転行列を説明するもう1つのガイドは Egon Rathの行列に関するメモ です。

行列乗算はもちろんこれらの4×4行列の間で機能するので、回転の後に並進を実行するには、適切な回転行列を作成し、それに並進行列を掛けます。

これはあなたにちょうどそれを正しくするためにもう少し自由を与えることができます、そしてまた誰もそれが何をしているのか理解することをほぼ完全に不可能にするでしょう、5分であなたを含めて。

しかし、あなたは知っています、それはうまくいきます。

編集：私は、これがおそらく最も重要で実用的な使い方、つまりJavaScriptを使って複雑な3D変換を段階的に作成することについて言及していないことに気付きました。

39
Jeff

追加のマークアップ層を使用して複数の変換を適用することもできます。

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

これは、Javascriptを使用して変換を使用して要素をアニメートするときに非常に便利です。

23
richtelford

このように複数の変換を適用できます。

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}
19
geekme

将来的には、このように書くことができます。

li:nth-child(2) {
    rotate: 15deg;
    translate:-20px 0px;        
}

これは、要素に個々のクラスを適用するときに特に役立ちます。

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

この構文は、進行中の CSS Transforms Level 2仕様で定義されています しかし、現在のブラウザサポートについてはchromeカナリア以外は見つけることができません。いつか私が戻ってきて、ここでブラウザサポートを更新することを願っています;）

この記事 に情報が見つかりました。現在のブラウザでの回避策についてはこちらをご覧ください。

1
schellmax

単一行cssで回転と移動を変換します。 

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }
<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>
0
Vinkal

_ css _ に2つ以上の値を繰り返す場合、!importantタグを使用しない限り、常に最後の値が適用されます。ただし、できる限り!importantを使用しないでください。あなたの場合はそれが問題なので、2番目の変換 override この場合の最初の変換...

では、どのようにしてそのときあなたが望むことができるのでしょうか... ...

心配しないでください 、transformは同時に複数の値を受け入れます...したがって、次のコードは機能します。

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

Transformを試したい場合は、 _ mdn _ からiframeを実行してください。

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

詳細については、以下のリンクをご覧ください。

<< CSS変換>>

0
Alireza