【CSS】画像を斜めに傾けて表示する方法｜rotateとskewの使い分け・ホバー演出

.tilted {
  transform: rotate(15deg);  /* 時計回りに15度 */
}

.tilted-left {
  transform: rotate(-15deg); /* 反時計回りに15度 */
}

<img class="tilted" src="example.jpg" alt="傾いた画像">

.skewed {
  transform: skewX(-12deg); /* 横方向に傾ける */
}

/* バナーなどでよく使う「斜めの帯」 */
.ribbon {
  transform: skew(-10deg);
}

.corner {
  transform: rotate(20deg);
  transform-origin: left bottom; /* 左下を軸に回転 */
}

.photo {
  transition: transform 0.3s ease;
}

.photo:hover {
  transform: rotate(5deg) scale(1.05); /* 少し傾けて拡大 */
}

/* NG: 2つめのtransformが1つめを上書きしてrotateが消える */
.bad {
  transform: rotate(15deg);
  transform: translateX(20px);
}

/* OK: スペース区切りで1つにまとめる */
.good {
  transform: rotate(15deg) translateX(20px);
}

.diamond {
  width: 200px;
  height: 200px;
  overflow: hidden;
  transform: rotate(45deg);
}
.diamond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(-45deg) scale(1.5); /* 戻して隙間を埋める */
}