【CSS】transform - 要素の変形

CSSのtransformプロパティについて解説します。

検証環境

CSS

macOS

14.1

transform

transformは“変形”のプロパティです。

要素の回転や拡大・縮小、軸の移動などを実現します。

基本構文

transform: 値;

複数値はスペースで区切ります。

transform: 値 値 値;

値

一般的に値は関数を使います。

代表的な関数は次の通りです。

rotate

route関数は要素を回転します。

rotate(角度)

rotateX

routeX関数は水平軸を中心に要素を回転します。

rotateX(角度)

rotateY

routeY関数は垂直軸を中心に要素を回転します。

rotateY(角度)

scale

scale関数は要素を拡大・縮小します。

scale(値)

scaleX

scaleX関数は要素を水平軸の方向に拡大・縮小します。

scaleX(値)

scaleY

scaleY関数は要素を垂直軸の方向に拡大・縮小します。

scaleY(値)

translate

translate関数は水平軸・垂直軸の方向に要素を移動します。

translate(水平、垂直)

translateX

translateX関数は水平軸の方向に要素を移動します。

translateX(値)

translateY

translateY関数は垂直軸の方向に要素を移動します。

translateY(値)

サンプル

rotate

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: rotate(45deg);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー

rotateX

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: rotateX(45deg);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー

rotateY

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: rotateY(45deg);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー

scale

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: scale(2.5);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー

scaleX

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: scaleX(2.5);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー

scaleY

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: scaleY(2.5);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー

translate

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: translate(50%, 50%);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー

translateX

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: translateX(50%);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー

translateY

sample.html

<style>
.sample {
    ___ih_hl_start
    transform: translateY(50%);
    ___ih_hl_end
}
</style>

<img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">
<img class="sample" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/transform/hacker-commandline.jpeg">

プレビュー