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

605

CSSを使用して、複数のアプリケーションを適用するにはどうすればよいtransformですか？

例：以下では、回転ではなく、移動のみが適用されます。

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

css css-transforms

— ベン
ソース

995

これらを次のように1行に記述する必要があります。

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

複数の変換ディレクティブがある場合、最後のディレクティブのみが適用されます。他のCSSルールと同じです。

複数のトランスフォーム1行ディレクティブが右から左に適用されることに注意してください。

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

同じ結果は生成されません：

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

スニペットを展開

— ルカド
ソース

55

複数の影のように「」で区切ってみましたが、うまくいきませんでした。ありがとうございました。

— ベン

2

回転の前にスキューのように、ある変形を他の変形の前に適用することは可能ですか？私にとって、私が何をしようとも、要素は最初に回転され、次にゆがめられて、私が望むものではないものになってしまいます。

— Muhammad Umer 2013

2

それらを複数の行に分割する

— 方法はありません

2

transform：translate（100px、100px）rotate（45deg）translate（100px、100px）rotate（45deg）; equals transform：translate（200px、200px）rotate（90deg）、最後の1つが追加されます

— bigCat

3

@ jave.web、あなたは右から左を意味しました、正しいですか？の場合transform: scale(1,1.5) rotate(90deg);、回転はスケールの前に行われます。

— Jargs

43

この回答は、役立つ可能性があるからではなく、真実であるという理由だけで追加します。

チェーン化して複数の翻訳を作成する方法を説明する既存の回答を使用することに加えて、4x4マトリックスを自分で作成することもできます

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

x軸を中心とした X軸を中心とした回転
回転：y軸を中心とした Y軸を中心とした回転
回転：z軸を中心とした回転：

私は翻訳の良い例を見つけることができなかったので、私がそれを正しく覚えている/理解していると仮定すると、翻訳：

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

詳細については、変換に関するウィキペディアの記事と、かなりよく説明されているPragamatic CSS3チュートリアルをご覧ください。任意の回転行列を説明するもう1つのガイドは、行列に関するEgon Rathのメモです。

もちろん、行列の乗算はこれらの4x4行列間で機能するため、回転に続いて平行移動を実行するには、適切な回転行列を作成し、それを平行移動行列で乗算します。

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

しかし、それは機能します。

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

— ジェフ
ソース

3

mines.eduの「ランダムサイト」は、残念ながら現在はリンク切れです。

— Matt Sach、2015

1

— Matt Sach

1

@MattSach Ok、明らかに「今日より後」は「6か月後」を意味しますが、少なくとも9要素のリンクは修正されています（他の誰かがウェイバックとのランダムサイトリンクを修正し、私は彼らのリードに従いました）

— Jeff

1

私もあなたが彼らを理解するのを助けるためにこれを作りました。

— アレックス、

6

これは本当にこのトピックに適合しません

— user151496

24

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

<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を使用した変換で要素をアニメーション化するときに非常に役立ちます。

— リッチテルフォード
ソース

あなたの忘れ物transform-style: preserve-3d

— ジャックギフィン

ネストされた2D変換では必須ではありません-希望する結果によって異なります。Transform-originはおそらく便利です。

— リッチテルフォード2017

21

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

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

— オタク
ソース

2

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

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 Canary以外は見つかりません。いつか私が戻ってきて、ここでブラウザのサポートを更新することを願っています;）

この記事で、現在のブラウザの回避策について確認したい情報を見つけました。

— シェルマックス
ソース

1

CSSから始めて、2つ以上の値を繰り返す場合、!importantタグを使用しない限り、常に最後の値が適用さ!importantれますが、同時にできるだけ多くの使用を避けてください。この場合、最初の変換をオーバーライドします ...

では、どうすれば自分のやりたいことができるのでしょうか？...

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

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

変換をいじるには、以下の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

回転と変換を1行で変換するcss：-How？

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>

スニペットを展開

— ヴィンカル
ソース