©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 3D Transform</title>
	<style>
		div {
			height: 150px;
			width: 200px;
			margin: 10px;
		}
		#origin { border: 3px solid black; }
		.trans {
			background-color: #87CEFA;
			border: 3px solid red;
		}
		#trans_01 {
			-webkit-transform: translate(100px, 50px);
			-ms-transform: translate(100px, 50px);
			transform: translate(100px, 50px);
		}
		#trans_02 {
			-webkit-transform: perspective(500px) translate3d(100px, 50px, -150px);
			transform: perspective(500px) translate3d(100px, 50px, -150px);
		}
	</style>
</head>

<body>

	<h1>translate3d() 메소드를 이용한 요소의 이동</h1>

	<div id="origin">이 요소의 원래 위치입니다.</div>
	<div id="trans_01" class="trans">이 요소는 원래 위치에서 x축의 양의 방향으로 100px, y축의 양의 방향으로 50px만큼 이동했습니다.</div>
	<div id="trans_02" class="trans">이 요소는 원래 위치에서 x축의 양의 방향으로 100px, y축의 양의 방향으로 50px, z축의 음의 방향으로 -150px만큼 이동했습니다.</div>

</body>

</html>