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

スポンサーリンク
LINEで送る
Pocket

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)

活用したデザイン

divを使ったボックスのデザイン コピペで使えるHTML+CSS
divを使って様々なデザインのコンテンツボックスをCSSで実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
三角形や不等号、記号の向きを変える コピペで使えるHTML+CSS
三角の▲、不等号の>といった記号の表示向きを変えます。見出しや、文の初めなどに配置して文章にアクセントを加えます。 ▲の向きを変える ▲を右向きにする...
blockquote q 引用符をデザイン コピペで使えるHTML+CSS
引用する際に用いるblockquote要素とq要素について、CSSの::beforeセレクターと::afterセレクター及びtransformプロパティのrotate()関数を用いて独自の引用符を実装します。
LINEで送る
Pocket

タイトルとURLをコピーしました