●トップ > 勉強中 > HTML5+CSS3 > ４回目　②ページ読み込みで動く/要素を回転表示する -transform:rotate-

４回目　②ページ読み込みで動く/要素を回転表示する -transform:rotate-

2014-11-17
@keyframes　キーフレーム名{
　 0% { transform: rotate(角度deg);}
100% { transform: rotate(角度deg);}
}

個別表示

・transform:rotate() ()要素を回転表示する

補間方法　animationn-timing-function

・normal　順方向（時計回り）初期値
・alternate　奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse　逆回り　←一部動かないなどの不具合有
・alternate-reverse　初回のアニメーションは逆方向に実行し、次は順方向

角度　deg

・deg　角度

補間方法　animationn-timing-function

・rotate(回転角度)　rotate()関数では、角度によって2D回転を指定します。
・rotateX(回転角度)　　X軸を軸とする角度によって時計回りの回転を指定します。
・rotateY(回転角度)　　Y軸を軸とする角度によって時計回りの回転を指定します。
・rotateZ(回転角度)　　Z軸を軸とする角度によって時計回りの回転を指定します。
・rotate3d(数値, 数値, 数値, 回転角度)

回る

© 引用サイト⇒nemuchan.comさまサイトより

--[ html ]-----------------------

<div class="anime01a"></div>

--[ CSS ]------------------------
.anime01a{
	background:#000;
	color:#fff;
	width:100px;
	height:10px;
	margin:40px 0;
	-webkit-animation:anime01a 5s infinite alternate;
	animation:anime01a 5s infinite alternate;
}

@-webkit-keyframes anime01a{
	0%	{}
	100%	{-webkit-transform: rotate(360deg);}
}
@keyframes anime01a{
	0%	{}
	100%	{transform: rotate(360deg);}
}
回るイルカ
--[ html ]-----------------------

<div class="iruka"></div>

--[ CSS ]------------------------
｛animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向｝
＠keyframes キーフレーム名｛～｝

.iruka{ 
background:url(images/iruka1.png);
width:160px;
height:160px;
margin:40px 0;
-webkit-animation:irukamawaru 5s linear infinite normal;
animation:irukamawaru 5s linear infinite normal;
}

@-webkit-keyframes irukamawaru{
	0%	{}
	100%	{-webkit-transform: rotate(360deg);}
}
@keyframes irukamawaru{
	0%	{}
	100%	{transform: rotate(360deg);}
}