目次
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(倍率)
| ｙ方向に拡大・縮小 |
変形する要素
|
| 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で実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
programming-cafe.com
三角形や不等号など文字の向きを変える コピペで使えるHTML+CSS
三角の▲、不等号の>といった記号や文字の表示の方向を変えます。見出しや、文の初めなどに配置して文章にアクセントを加えることができます。 ▲の向きを変える ▲を右向きにする ▲を右向きにしますと、 ▲ となります style属性で記述 <span>▲を右向きにしますと、</span> <span style="displ...
programming-cafe.com
blockquote q 引用符をデザイン コピペで使えるHTML+CSS
引用する際に用いるblockquote要素とq要素について、CSSの::beforeセレクターと::afterセレクター及びtransformプロパティのrotate()関数を用いて独自の引用符を実装します。
programming-cafe.com