問題 × 解決策

cssで要素を回転させる方法

問題

cssで要素を回転させるには?

解決策

css3のrotateを使い、「transform: rotate(○○deg)」と記述することで、要素を回転することができます。

 

css3による要素の回転

css3を駆使することで様々な表現が実現できるため、デザインに幅が広がります。
今回はcssで要素を回転させる方法をご紹介します。

DEMOはこちら

要素を回転

HTMLはこちら

要素「クラス:rotate-box」を用意します。

<div class="rotate-box">
	<p class="text">要素を回転</p>
</div>

CSSはこちら

要素「クラス:rotate-box」を「transform: rotate(15deg)」で15度変形させます。

.rotate-box{
	display: inline-block;
	padding: 10px 15px;
	background-color: #FCECE8;
	transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

twelve − ten =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧