CSS：CSSで要素を回転させる方法「transform:rotate()」 | raining

テクノロジーカテゴリーの変更を依頼記事元:

9 usersがブックマークコメント

記事へのコメント1件

注目コメント
新着コメント

U1and0 【CSS】 ? 1 2 3 4 5 6 7 8 9 <style type="text/css"> div#rotate { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } </style> 【HTML】 ? 1 2 3 <div id="rotate"> test </div

html
CSS

2016/01/06 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fraining.bear-life.com%2Fcss%2Fcss%25E3%2581%25A7%25E8%25A6%2581%25E7%25B4%25A0%25E3%2582%2592%25E5%259B%259E%25E8%25BB%25A2%25E3%2581%2595%25E3%2581%259B%25E3%2582%258B%25E6%2596%25B9%25E6%25B3%2595%25E3%2580%258Ctransformrotate%25E3%2580%258D" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://raining.bear-life.com/css/css%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%8Ctransformrotate%E3%80%8D">CSS：CSSで要素を回転させる方法「transform:rotate()」 | raining</a><a href="https://b.hatena.ne.jp/entry/raining.bear-life.com/css/css%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%8Ctransformrotate%E3%80%8D">はてなブックマーク - CSS：CSSで要素を回転させる方法「transform:rotate()」 | raining</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

CSS：CSSで要素を回転させる方法「transform:rotate()」 | raining

CSSの「transf orm:rotate()」を使用するとテキストや画像、指定した要素を回転させて表示することがで... CSSの「transf orm:rotate()」を使用するとテキストや画像、指定した要素を回転させて表示することができます。 transf orm: rotate(10deg); rotate()には回転する角度を指定します。下記のように「-」マイナスで指定することも可能です。その場合は逆方向に回転して表示されます。 transf orm: rotate(-10deg); 要素を回転させて文字や画像を傾けて表示させたい場合などに利用できそうです。下記にCSSの「transf orm:rotate()」を使用して、要素を回転させて表示した時の方法を記載します。 ■ 「transf orm:rotate()」の使用方法【CSS】 <style type="text/css"> div#rotate { -moz-transf orm: rotate(-20deg); -webkit-trans