transform

transform:translate(距離);

直線的に表示位置を移動。

2D移動 translate(50px,20px)

/*css*/
#tes1 {
	-webkit-transform: translate(50px,20px);
	transform: translate(50px,20px);
	}

2D移動（x方向に50px、y方向に20px)

/*css*/
#tes1 {
	-webkit-transform: translateX(50px);/*x方向のみ。(-20%)とか％指定可能*/
	transform: translateX(50px);
	-webkit-transform: translateY(20px);/*y方向のみ。％指定可能*/
	transform: translateY(20px);
	-webkit-transform: translateZ(10px);/*z方向のみ。％指定不可。zはパッと見わからないかも？*/
	transform: translateY(10px);
	-webkit-transform: translate3d(50px,20px,10px);/*xyz方向。3d移動*/
	transform: translateY(20px);
	}

transform:rotate3d(角度);

ボックスの高さを%で指定して、このプロパティを指定すると、高さがautoになるっぽい

2D回転 rotate(45deg)

/*css*/
#red {
	background:red;
	transform:rotate(45deg);
	}

2D回転（45deg)

3D x軸回転 rotateX(180deg)

/*css*/
#blue {
	background:blue;
	transform:rotateX(180deg);
	}

3D x軸回転（180deg)

3D y軸回転 rotateY(180deg)

/*css*/
#green {
	background:green;
	transform:rotateY(180deg);
	}

3D y軸回転（180deg)

3D z軸回転 rotateZ(180deg)

/*css*/
#yellow {
	background:yellow;
	transform:rotateZ(180deg);
	}

3D z軸回転（180deg)

3D xyz軸回転 rotate3d(30,30,30,80deg)

/*css*/
#black {
	background:black;
	transform:rotate3d(30,30,30,80deg);
	}

3D xyz軸回転（30,30,30,80deg)

transitionで↑の位置までアニメーション

/*css*/
#purple {
	background:purple;
	transition:transform 1s linear;
	}
#purple:hover {
	transform:rotate3d(30,30,30,80deg);
	}

マウスオーバーして下さい。

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>