川口・さいたまのホームページ製作 川口・さいたまのホームページ制作会社関東ダイイチへ問い合わせる 埼玉県川口市のホームページ制作会社関東ダイイチへ電話する さいたま・川口のホームページ制作会社関東ダイイチへメールする



Illustratorのチュートリアル|さいたま・川口の低価格なホームページ制作会社
TOPダイイチウェブニュース>CSSで回転させる

CSSで回転させる

今回は、CSSのみで行うアニメーション効果(要素を回転)をご紹介いたします


sample
.spin_css {
	width: 100px;
	height: 100px;
	background: #2B958D;
	-webkit-animation: spin 2s linear infinite;
	-moz-animation: spin 2s linear infinite;
	-ms-animation: spin 2s linear infinite;
	-o-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}


sample









背景・秒数などをを変更すれば、上記のようにも出来ます


以上、ホームページ制作の際は、試してみて下さい。



関連ニュース
CSS3リファレンス.1
CSS3リファレンス.2
CSS3リファレンス.3
CSSでアニメーション
CSSで出来るブレンドモード






ホームページ制作の料金|川口WEB会社HP制作の製作実績|川口のホームページ制作会社HP制作会社の関東ダイイチ|会社案内ウェブ制作のさいたま|関東ダイイチ|問い合わせ
Copyright © 2014 web no daiichi All Rights Reserved.  
>TOP >ホームページの必要性 >料金
>ご注文から公開まで >お問い合わせ >制作実績
>会社案内 >ダイイチニュース  >リンク
ホームページ制作|埼玉県川口市西川口2-10-1
川口・さいたまのWEB制作