CSS で複数の変換を適用する
-
CSS で複数の
transform値を指定して複数の変換を適用する -
CSS で複数の
transformを指定して複数の変換を適用する -
CSS で複数の
transform-originを指定して複数の変換を適用する - CSS でネストされたクラスを使用して複数の変換を適用する
- まとめ
CSS transform は要素にアニメーション効果を追加するための強力な方法ですが、十分に活用されていません。 ただし、複数の変換を一度に適用すると、目的の結果を得るのが難しくなる可能性があります。 たとえば、要素が重なっているときに、要素が同期して変形するようにします。
この記事では、CSS で複数の変換を適用する方法について説明します。
CSS で複数の transform 値を指定して複数の変換を適用する
複数の CSS transforms を使用する方法はたくさんあります。 以下のセクションでそれらについて説明します。
複数の CSS transforms を適用する 1つの方法は、省略形の transform プロパティを使用することです。 このプロパティは、スペースで区切られた複数の値を取ることができます。
例えば：
transform: rotate(45deg) scale(2);
この線は、要素を 45 度回転させてから、そのサイズを 2 倍にします。
もう 1つの例は、要素を 30 度回転させてから 50px だけ平行移動させたい場合、次のコードを使用します。
transform: rotate(30deg) translate(50px);
このラインは、複雑なアニメーションやインタラクションを作成するための貴重なテクニックです。
複数の 変換 の例を見てみましょう。 画像の変換には、次のコードを使用できます。
コード例:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 10px;
}
.box {
background: url("/img/DelftStack/logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 600px;
border: 2px solid #000000;
transform: rotate(110deg) translate(45px, -160px);
}
h1 {
color: #000000;
}
</style>
</head>
<body>
<h1>
CSS Multiple transforms
</h1>
<strong>
How to apply multiple transforms in CSS?
</strong>
<div class="box"></div>
</body>
</html>
上記のコードでは、画像の変換に CSS 関数 transform: rotate(110deg) translate(45px, -160px) を使用しました。 この CSS コードは、画像を 110 度まで回転させます。
したがって、上記のコードを使用すると、それを適用して任意の画像を変換できます。
CSS で複数の transform を指定して複数の変換を適用する
複数の transform を使用する別の方法は、各 transform を個別に指定することです。
例えば：
transform: rotate(45deg);
transform: scale(2);
CSS で複数の transform-origin を指定して複数の変換を適用する
transform-origin プロパティを利用して、変換の原点を変更することもできます。 例えば：
transform-origin: 50% 50%;
transform-origin: bottom right;
これは、原点を要素の中心またはコンポーネントの右下隅に変更します。
CSS でネストされたクラスを使用して複数の変換を適用する
CSS 変換を適用する別の方法があります。 以下は CSS コードですが、複数の CSS transform を適用するために、outer-transform と inner-transform の 2つのネストされたクラスを作成します。
このコードは、目的の出力も提供します。
コード例:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #000000;
}
.outer-transform {
transform: translate(150px, 180px);
}
.inner-transform {
background: url("/img/DelftStack/logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 600px;
border: 2px solid #000000;
transform: rotate(-150deg);
}
</style>
</head>
<body>
<h1>
CSS multiple transforms
</h1>
<strong>
How to apply multiple transforms in CSS?
</strong>
<div class="outer-transform">
<div class="inner-transform"></div>
</div>
</body>
</html>
出力：
まとめ
CSS の要素に複数の transforms を適用できることをお知らせします。 div を同時に回転および平行移動させたり、要素を異なる方向に回転および平行移動させたりすることができます。
変換は、HTML 要素に視覚効果を作成するための強力なツールです。 CSS は複数の transforms をサポートしており、より幅広い効果を可能にします。
transforms を一緒に使用すると、本当に素晴らしいビジュアルを作成できます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn