transform 要素を変形するコピペで使えるHTML+CSS

スポンサーリンク

transformの概要

要素の変形CSS
transform:関数
目的ボックス系要素を変形させる
使用ボックス系要素
関連 
初期
変形する要素
<div style="width: 80%; height: 100px; border: 2px solid #ff0000; margin: auto; text-align: center; transform: rotate(5deg) skewX(20deg);">
  <span style="height:100px;line-height:100px;font-size:30px">変形する要素</span>
</div>

関数

none

初期値
変形する要素
transform: none

translateX()

x方向への20px移動
変形する要素
transform: translateX(20px)

translate()

y方向への20px移動
変形する要素
transform: translateY(20px)

translate()

x方向、y方向への20px移動
変形する要素
transform: translate(20px)

scaleX(倍率)

x方向に拡大・縮小
変形する要素
transform: scaleX(1.3)

scaleY(倍率)

y方向に拡大・縮小
変形する要素
transform: scaleY(0.5)

scale(倍率)

x方向、y方向に拡大・縮小
変形する要素
transform: scale(1.3)

rotate(deg)

回転
変形する要素
transform: rotate(10deg)

skewX(deg)

x方向に傾斜
変形する要素
transform: skewX(10deg)

skewY(deg)

y方向に傾斜
変形する要素
transform: skewY(10deg)

skew(deg)

x方向、y方向に傾斜
変形する要素
transform: skew(10deg,10deg)

matrix()

6つの数を指定する
変形する要素
transform: matrix(1.2 , 0.2 , 0.2 , 0.8 , 30 , 10)

関数を組み合わせて表記

matrixは全て実数で表記するため、わかりにくく、推奨しない。以下のような書き方をおすすめします。

6つの数を指定する
変形する要素
transform: rotate(-170deg) skewX(20deg)