目次
| サンプル | transform |
| 要素を移動させる(translate) | |
| 要素を回転させる(rotate) | |
| 要素を拡大縮小させる(scale) | |
| 要素に傾斜をつける(skew) |
transform
transformは、要素を移動/回転/拡大/縮小表示します。
| transform: 各種関数 |
https://developer.mozilla.org/ja/docs/Web/CSS/transform
要素を移動させる(translate)
test
上記サンプルのコードです。
<style>
.test1 {
transform: translate(10px, 10px);
border: 1px solid #000;
background-color: #e0ffff;
width: 300px;
height: 50px;
}
.original {
border: 1px dotted #000;
background-color: #d1dada;
width: 300px;
height: 50px;
}
</style>
<body>
<div class="original">
<div class="test1">test</div>
</div>
</body>
3行目は、translate関数で右に10px,下に10px移動させます。
この数値をマイナスにした場合は、左と上に移動します。
数値+%の指定も可能です。
translateX(数値+単位)とした場合は水平のみの移動になります。
translateY(数値+単位)とした場合は垂直のみの移動になります。
要素を回転させる(rotate)
test
上記サンプルのコードです。
<style>
.test2 {
transform: rotate(3deg);
border: 1px solid #000;
background-color: #e0ffff;
width: 300px;
height: 50px;
}
.original {
border: 1px dotted #000;
background-color: #d1dada;
width: 300px;
height: 50px;
}
</style>
<body>
<div class="original">
<div class="test2">test</div>
</div>
</body>
3行目は、rotate関数で回転させます。単位はdegです。
この数値をマイナスにした場合は、逆に回転します。
要素を拡大縮小させる(scale)
test
上記サンプルのコードです。
<style>
.test3 {
transform: scale(1.1, 0.8);
border: 1px solid #000;
background-color: #e0ffff;
width: 300px;
height: 50px;
}
.original {
border: 1px dotted #000;
background-color: #d1dada;
width: 300px;
height: 50px;
}
</style>
<body>
<div class="original">
<div class="test3">test</div>
</div>
</body>3行目は、scale関数で横を1.1倍,縦を0.8倍にしています。
scaleX(数値)とした場合は縦のみ変更されます。
scaleY(数値)とした場合は横のみ変更されます。
要素に傾斜をつける(skew)
test
上記サンプルのコードです。
<style>
.test4 {
transform: skew(6deg, 3deg);
border: 1px solid #000;
background-color: #e0ffff;
width: 300px;
height: 50px;
}
.original {
border: 1px dotted #000;
background-color: #d1dada;
width: 300px;
height: 50px;
}
</style>
<body>
<div class="original">
<div class="test4">test</div>
</div>
</body>3行目は、skew関数で傾斜をつけます。単位はdegです。
この数値をマイナスにすると逆方向になります。
skewX(数値+単位)とした場合は水平のみの傾斜になります。
skewY(数値+単位)とした場合は垂直のみの傾斜になります。
関連の記事