制作実績お見積フォームHTMLWordPressEC累計コーディング数:15028ページホーム>Web制作>CSS3のtransform:rotateで要素を回転表示する方法CSS3のtransform:rotateで要素を回転表示する方法Web制作2016年08月19日CSS3のプロパティについて解説する連載です。今回はtransformの中から、要素の回転をするtransform:rotateの使い方をご紹介します。transform:rotateの指定方法transform:rotateを指定するには、下記のように記述します。rotateの括弧内に記載した角度に従って、要素が回転表示されます。回転軸を指定したい時は、下のようにrotateX、rotateY、rotateZを使います。originを指定することで、回転時の原点(基準)を決めることも可能です。「水平方向の基準」と「垂直方向の基準」は両方とも、初期値はcenterです。垂直方向の基準;transform:rotateの具体例それでは、transform:rotateの具体例について見ていきましょう。こちらの例では、下の画像を対象に変形(回転)を行っていきます。rotaterotateを使用して、先ほどの画像を回転させた例です。時計回りに15度(15deg)だけ回転させています。rotate(15deg);rotate(transform-originあり)transform-originを指定して、回転時の原点を指定した例です。上のtransform-originなしの場合と比較してみてください。下の例では、水平方向をleft、垂直方向にcenterを指定しています。center;rotateXここからは、回転軸を指定した例について見ていきましょう。X軸を回転軸として、要素を回転します。rotateX(60deg);rotateYこちらはY軸で回転させた例です。rotateY(60deg);rotateZ最後はZ軸で回転させた例になります。rotateZ(60deg);あとがき画像やテキストなどの要素を回転して表示できる、transform:rotateの使い方についてご紹介しました。他にも要素を変形できるプロパティはあるので、それらと組み合わせながら自在に要素を変形していきましょう。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。