SQLの窓

2011年05月29日


CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript

※ IE では動作しません
ボタンを押すと、単純に移動アニメーションになります

最初の transition 指定のみ CSS で指定していますが、後の動作は
JavaScript で適用していいます。その際注意するのは、ブラウザに
よって、プロパティが違うところです( 最初が小文字で無いのもある )

こういう指定が面倒だと思われる場合は、CSS で クラスを作成して、
エレメントにクラスを追加指定すればいいと思います。
※ 今のクラス文字列を取得して、" クラス名" を追加して設定。
<style type="text/css">
.place_holder {
	position:relative;
	width:600px;
	height:400px;
	border:solid 1px #000;
}
#my_box1 {
	position:absolute;
	left:0px;
	top:0px;
	width:30px;
	height:30px;
	background:url("http://winofsql.jp/favicon.ico");
	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease;
	-o-transition: all 5s ease;
	-ms-transition: all 5s ease;
	transition: all 5s ease;
	border:1px #000 solid;
}
</style>
<script type="text/javascript">
var tf_flg1 = false;
function my_action1() {
//	alert("テスト開始");
	// 移動
	if ( tf_flg1 = !tf_flg1 ) {
		document.getElementById("my_box1").style.left = "600px";
		document.getElementById("my_box1").style.top = "400px";
	}
	else {
		document.getElementById("my_box1").style.left = "0px";
		document.getElementById("my_box1").style.top = "0px";
	}
}

function my_action2() {
	// 移動
	var tf = document.getElementById("my_box1");

	if ( tf_flg1 = !tf_flg1 ) {
		tf.style.left = "600px";
		tf.style.top = "400px";
		tf.style.transform = "rotate(360deg)";
		tf.style.webkitTransform = "rotate(360deg)";
		tf.style.MozTransform = "rotate(360deg)";
		tf.style.OTransform = "rotate(360deg)";
		tf.style.msTransform = "rotate(360deg)";
	}
	else {
		tf.style.left = "100px";
		tf.style.top = "300px";
		tf.style.transform = "rotate(0deg)";
		tf.style.webkitTransform = "rotate(0deg)";
		tf.style.MozTransform = "rotate(0deg)";
		tf.style.OTransform = "rotate(0deg)";
		tf.style.msTransform = "rotate(0deg)";
	}
	// 回転
	
}
</script>

<input type="button" value="実行1" onclick="my_action1();">
<input type="button" value="実行2" onclick="my_action2();">
<div class="place_holder">
<div id="my_box1"></div>
</div>
関連する Microsoft ドキュメント

msTransform Property
 (CSSStyleDeclaration, currentStyle, style, ...)

関連する記事
WEB フォントを使った「フェードイン、フェードアウト」



【CSS3の最新記事】
posted by lightbox at 2011-05-29 10:25 | CSS3 | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり