問題
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);
}
コメント