transform은 엘리먼트를 변형할 수 있도록 만드는 스타일입니다.
webkit계열이나 오페라 파이어폭스는 각Prefix에 맞게 사용하면 됩니다.
Prefix -o-box-shadow -moz-box-shadow -webkit-box-shadow Prefix 는 표준제정 이후에도 유효합니다.
문법
transform : 메서드()
Sample
-webkit-transform: rotate(90deg) scale(1.2) skew(2deg);
JavaScript로 스타일 넣는 방법
object.style.transform=“rotate(3deg)”;
-------------------------------------------------------------------------------
Function Description
-------------------------------------------------------------------------------
none transform 효과를 초기화 한다
translate(x,y) 2차원 이동. (x,y 좌표값으로 이동)
translate3d(x,y,z) 3차원 이동. (x,y,z 위치로 이동)
translateX(x) 오직 x 좌표로만 이동한다.
translateY(y) 오직 y 좌표로만 이동한다.
translateZ(z) 오직 z 좌표로만 이동한다.
scale(x,y) 스케일을 확대/축소 한다. (x값:x축으로의 비율 , y값:y축으로의 비율)
scale3d(x,y,z) 스케일을 확대/축소 (x값:x축으로의 비율 , y값:y축으로의 비율 , z값:z축으로의 비율)
scaleX(x) 오직 x 좌표로만 스케일을 확대/축소 한다.
scaleY(y) 오직 y 좌표로만 스케일을 확대/축소 한다.
scaleZ(z) 오직 z 좌표로만 스케일을 확대/축소 한다.
rotate(angle) 회전 시킨다
rotate3d(x,y,z,angle) 3차원 회전
rotateX(angle) x축 방향으로 회전시킨다
rotateY(angle) y축 방향으로 회전시킨다
rotateZ(angle) z축 방향으로 회전시킨다
skew(x-angle,y-angle) 객체를 기울인다. (x축:좌/우 기울임. y축:상/하 기울임)
skewX(angle) 객체를 x축방향으로 기울인다. (플러스:우측 기울임, 마이너스:좌측기울임)
skewY(angle) 객체를 y축방향으로 기울인다. (플러스:아래쪽 기울임, 마이너스:윗쪽 기울임)
perspective(n) 객체에 3차원 효과를 준다
-------------------------------------------------------------------------------
샘플코드
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>transform예제</title>
<style type="text/css">
.sbox{ text-align:center; }
.sbox img{ -webkit-box-shadow: 5px 5px 10px black; }
.rotate{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
}
</style>
</head>
<body>
<div class="sbox">
<img src="http://placehold.it/200x100" /><br />
<img class="rotate" src="http://placehold.it/200x150" />
</div>
</body>
</html>
이런결과가 나옵니다.
첫번째 사각형은 회전이 되지 않지만 두번째 사각형은 회전이 됩니다.
참고 사이트
http://www.paulrhayes.com/experiments/cube-3d/index.html
여기에 가보시면 CSS3를 활용하여 큐브모양의 3D로 구현되어 있는 멋진 페이지를 보실 수 있습니다.
'WEB_TECH > CSS3' 카테고리의 다른 글
| css3를 활용하여 모션주기. transition (0) | 2013.06.19 |
|---|---|
| css3 모서리가 둥근 사각형 만들기 (0) | 2013.06.19 |
| css3를 사용하여 box-shadow 그림자 구현하는 방법 (0) | 2013.06.19 |
| opacity 사용하는 방법 (0) | 2013.06.19 |
| font-face (0) | 2013.05.08 |
