CSSでテキストや画像を回転させる方法

2015年12月4日2023年9月30日

要素の回転方法

transform:rotate(回転角度)

要素を回転させるにはtransform:rotate(回転角度deg)を指定して回転させることができます。2D（平面）回転でプラスで時計回り、マイナスで反時計回り回転します。

例）transform:rotate(-10deg)の場合

テスト1
rotate(-10deg)

.rotate1{
  background:rgba(255,0,0,0.8);
  color:#fff;
  width: 200px;
  height:150px;
  padding-top:50px;
  text-align: center;
  transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
}

例）transform:rotate(20deg)の場合

テスト2
rotate(20deg)

.rotate2{
  background:rgba(255,0,0,0.8);
  color:#fff;
  width: 200px;
  height:150px;
  padding-top:50px;
  text-align: center;
  transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
}

transform:rotateX(回転角度)

X軸を中心に回転　※実際アニメーションはありません

transform:rotateY(回転角度)

Y軸を中心に回転　※実際アニメーションはありません

transform:rotateZ(回転角度)

Z軸を中心に回転　※実際アニメーションはありません

transform:rotate3d(X軸, Y軸, Z軸, 回転角度)

x,y,zを指定して3Dに回転します。

基準点を変える

transform-origin:X軸 Y軸

transform-originで基準点を指定することができます。デフォルトはtransform-origin:50% 50%;
X軸は単位付きの数値と left center right のキーワードが使用可、Y軸は単位付きの数値と top center bottom のキーワードが使用可能になります。

例）transform-origin:50% 300pxの場合

テスト3
transform-origin:50% 300px

.transform-origin{
  background:rgba(255,0,0,0.8);
  color:#fff;
  width: 200px;
  height:150px;
  padding-top:50px;
  text-align: center;
  transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  transform-origin:50% 300px;
  -ms-transform-origin:50% 300px;
  -moz-transform-origin:50% 300px;
  -o-transform-origin:50% 300px;
  -webkit-transform-origin:50% 300px;
}

写真に三角のNewアイコンを付けてみる

よく見かける画像に文字付の三角アイコン。回転を利用すればCSSで作れてしまいます。

New

CSS

.sample-rotate1 {
  overflow: hidden;
  position: relative;
  width: 300px; /* 写真のサイズ */
}
.sample-rotate1 span {
  background:rgba(255,0,0,0.8);
  color: #FFF;
  font-size: 14px;
  padding: 70px 0px 5px;
  position: absolute;
  left: -97px;
  top: -41px;
  text-align: center;
  width: 200px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

html

<div class="sample-rotate1">
  <img src="XXX.jpg" width="300" />
  <span>New</span>
</div>

URLをコピーしました！