【CSS】transform（トランスフォーム）の基点（原点）

transform:rotateで少し回転（角度を変える）。
transform-originで基点をleft、topに指定。
基点は自由に変えることができる。
左下を基点にするなら、left、bottom。

サンプル

See the Pen transform（トランスフォーム）の基点（原点） by 125naroom (@125naroom) on CodePen.

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2020

【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）

あのー、水玉模様の背景をCSSで作りたいのですがーなるほどー、できますよー。工夫次第でいろんな背景が作れます。いろんなパターンまとめましたー背景パターン / 方眼紙 ver.1 See the Pen 【CSS】Ba

...

CSS

デザインのメモ

2021

【CSS】シンプルなボタンデザイン実装サンプル集

ボタンだーいろんなボタンをまとめましたーしっかり企業系のボタン BUTTON シンプルなボタンデザイン集シンプルなボタンデザイン集シンプルなボタンデザイン集シンプルなボタンデザイン集シンプルな四角ボタン、左に

...

CSS

デザインのメモ

2018

【CSS】Flexbox 最後の行を左寄せにする（space-between使用時）

4カラムの場合。before擬似要素、after擬似要素で空白のボックスを作る。サンプル See the Pen 【flexbox】justify-content: space-between / Last line,

...

CSS flexbox

デザインのメモ

Googleさんの
おすすめ

2025

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？三本線がハンバーガーに見えるからってことらしいですよクリックエフェクトサンプル集いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

CSS

デザインのメモ

2024.7.11

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいーわかりましたーよく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...

jQuery slick

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。いろいろありますねーいろいろあるのでまとめましたーアコーディオン、シンプル版 See the Pen アコーディオン、シ

...

jQuery

デザインのメモ

Googleさんの
おすすめ

2025

SPONSORED LINK

おすすめの広告です

google

デザインの記事

2025.05.09New
であうにあう2025 Campaign | niko and . . .
国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
デザインのこと – Web design gallery

2025.05.03
ソラニン
控えめに言って最高じゃないかと思う。きっと10年前も同じこと思ったんだろうなと思う…
いつかのこと

【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、外部ページからのリンクIDも可能）

2025.04.04
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、外部ページからのリンクIDも可能）
少し複雑な『タブ切り替え』を実装してみました。 ▽今回の実装テーマなんだか難しそう…
125naroom / デザインするところ（会社）です。