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

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

サンプル

コードを見る（HTML・CSS）

HTML

<div class="sample">
  <div class="naname">transformの基点</div>
</div>

CSS

/* ---------- 01 基点を左上にして回転 ---------- */
.sample {
  background: #f3efe6;
}
.sample .naname {
  color: #fff;
  background: #2b2a27;
  padding: 10px;
  transform: rotate(15deg);
  transform-origin: left top 0;
}
見本ページをひらく（基点を左上にして回転）
デザインのメモ 2018.9.19

デザコトauthor

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

tools toolkit コーディングの道具箱 コーディング中にさっと使う、フロントエンドの小さな道具箱。clamp() や px ⇄ rem、box-shadow など 26 のツールと、37 の用語集。