웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

2D transform 본문

css3

2D transform

jokack01 2013. 10. 8. 10:45

2D transform

transform 은 요소를 변형을 할 수 있게 하는 속성이다. rotate, scale, translate, skew 등과 같은 변형이 가능하다.

 

  • None : 변형 속성을 적용하지 않음 
  • matrix(n,n,n,n,n,n) : translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수
  • translate(x,y) : 요소의 위치를 옮기는 속성scale(x,y)요소의 크기를 비율에 맞춰 확대/축소하는 속성
  • rotate(angle) : 요소를 지정된 각도 만큼 회전시키는 속성
  • skew(x-angle, y-angle) : 요소를 지정된 각도만큼 모양을 비스듬히 변형시키는 속성

 

ex1.) translate - 위치 이동 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>translate</title>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,50px);
-moz-transform:translate(50px,50px);
-webkit-transform:translate(50px,50px);
/* 왼쪽으로50px,  위쪽에서 50px 만큼 위치 이동한다. */
}
</style>
</head>
<body>
<h1>2D transform - translate</h1>
<div> 일반 div </div>
<div id="div2"> translate 적용 예!! </div>
<br><br><br>
<p>
Translate 기능은 position 의 left 값과 top 값을 준 것과 같은 기능으로 보면 이해가 쉬울 것 같습니다.
</p>
</body>
</html>




ex2.) rotate - 회전

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>rotate</title>
<style type="text/css">
div
{
margin:100px;
width:200px;
height:100px;
background-color:yellow;
border:2px solid #CCC;
/* Rotate div */
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
/* 30도 만큼 회전 */
}
</style>
</head>
<body>
<h1>2D transform - rotate</h1>
<div> div 박스 회전 </div>
</body>
</html>




ex3.) scale - 크기변형

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Scale</title>
<style type="text/css">
div
{
width:100px;
height:50px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-moz-transform:scale(2,4);
-webkit-transform:scale(2,4);
/* 넓이값, 높이값  */
}
</style>
</head>
<body>
<h1>2D transform - Scale</h1>
<div>적용전</div>
<div id="div2">적용 후</div>
</body>
</html>




ex4.) skew - 왜곡, 비스듬히

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Skew</title>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
margin:50px;
transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg);
/* 가로축(x)30도 세로축(y) 20도 */
}
</style>
</head>
<body>
<h1>2D transform - Skew(왜곡)</h1>
<div>적용전</div>
<div id="div2">적용 후</div>
</body>
</html>




ex5.) matrix - 크기, 변형(크기와 변형을 동시에 준다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>matrix</title>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
margin:150px;
transform:matrix(2,0.5,-0.5,3,0,0);
-moz-transform:matrix(2,0.5,-0.5,3,0,0);
-webkit-transform:matrix(2,0.5,-0.5,3,0,0);
    /*
    scaleX, skewX,skewY, scaleY, X 이동, Y이동
    크기, 이동, 회전 등을 한번에 설정할 수 있다.
    */
}
</style>
</head>
<body>
<h1>2D transform - matrix(크기,변형)</h1>
<div>적용전</div>
<div id="div2">적용 후</div>
</body>
</html>

'css3' 카테고리의 다른 글

Transition  (0) 2013.10.08
3D transform  (0) 2013.10.08
font-face  (0) 2013.10.08
word-wrap  (0) 2013.10.08
text-shadow  (0) 2013.10.08
'css3' Related Articles more