定番
履歴

CSS3 要素を回転させる

CSS3 要素を回転させる
要素にクラスを指定して回転、逆回転させるサンプルです。

CSS3では簡単に画像やオブジェクトを回転させることができます。

アイキャッチにはなりますが、多用すると目が疲れるので使うところは考えましょう。

まずは単純にページを描画後に回転させておくサンプルです。

CSSで要素と回転の記述を書きます。

<style>
.demo_stage{
	background-color:blue;
	width:100px;
	height:100px;
	margin:10px;
}
.spin_item {
	animation: demo_spin 1.5s linear infinite;
}
@keyframes demo_spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
</style>

今回はSVGを使って書いた矢印を回します。

<div class="demo_stage">
<div class="spin_item" width="100" height="100">
	<svg width="100" height="100">
	    <path d="M50 0 L100 50 L80 50 L80 100 L20 100 L20 50 L0 50 Z" style="fill:#FFF"/>
	</svg>
</div>
</div>

次は逆回転です。

違いはスタートを0からに360を変え、ゴールを0にするだけ。

CSSコードサンプルはこちら

@keyframes demo_spin2 {
	0% {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}
}

最後にjQueryと区に合わせて、クリックしたら回り出すサンプルです。

JSはクリックしたらClassをつけ外しするシンプルなもの。

<script>
$(document).ready(function(){
	$(".demo_item").click(function(){
		$(this).toggleClass("spin_item3");
	});
});
</script>

CSSとHTMLはほぼ同じです。

<style>
.spin_item3 {
	animation: demo_spin3 1.5s linear infinite;
}

@keyframes demo_spin3 {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
</style>

回転の命令が書かれたclassをつけ外ししています。

<div class="demo_stage">
	<div class="demo_item" width="100" height="100">
	<svg width="100" height="100">
	    <path d="M50 0 L100 50 L80 50 L80 100 L20 100 L20 50 L0 50 Z" style="fill:#FFF"/>
	</svg>
	</div>
</div>
2018-10-07 22:44:52
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top