COWAZA

• html/css

• 2020.05.12

cssで回転させる

cssを使ってなにかを回転させます。
矢印とか回転させると便利かもしれません。

サンプル

回転前の矢印

cssで回転させたサンプル

右に90度回転しています。

サンプルソース HTML

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 64px; height: 64px; opacity: 1;transform: rotate(90deg);" xml:space="preserve">
	<g>
		<path class="st0" d="M255.991,0C114.615,0,0,114.615,0,256.009C0,397.385,114.615,512,255.991,512
			C397.385,512,512,397.385,512,256.009C512,114.615,397.385,0,255.991,0z M345.464,323.884l-89.473-89.456l-89.456,89.456
			l-44.097-44.097l133.552-133.57l133.57,133.57L345.464,323.884z" style="fill: rgb(215, 90, 90);"></path>
	</g>
	</svg>

ここではsvgを使っていますが、画像でも良いと思います。

サンプルソースCSS

transform: rotate(90deg);

ここではsvgタグに「transform: rotate(90deg);」を指定しています。
90degの数値を変更すれば角度が変わっていきます。