transform 속성

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

transform 속성 본문

Front-End (웹)/CSS

transform 속성

친절한개발초보자 2021. 9. 7. 14:48

728x90

transform과 변형 함수

transfrom: 함수

2차원 변형 함수

종류	설명
translate(tx, ty)	지정한 크기만큼 x축, y축으로 이동한다.
translateX(tx)	지정한 크기만큼 x축으로 이동한다.
translateY(ty)	지정한 크기만큼 y축으로 이동한다.
scale(sx. sy)	지정한 크기만큼 x축과 y축으로 확대/축소한다.
scaleX(sx)	지정한 크기만큼 x축으로 확대/축소한다.
scaleY(sy)	지정한 크기만큼 y축으로 확대/축소한다.
rotate(각도)	지정한 각도만큼 회전한다.
skew(ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡한다.
skewX(ax)	지정한 각도만큼 x축으로 왜곡한다.
skewY(ay)	지정한 각도만큼 y축으로 왜곡한다

3차원 변형 함수

종류	설명
translate3d(tx, ty, tz)	지정한 크기만큼 x축, y축, z 축으로 이동한다.
translateZ(tz)	지정한 크기만큼 z축으로 이동한다.
scale3d(sx, sy, sz)	지정한 크기만큼 x축, y축, z 축으로 확대/축소한다.
scaleZ(sz)	지정한 크기만큼 z축으로 확대/축소한다.
rotate(rx, ry, 각도)	지정한 각도만큼 회전한다.
rotate3d(rx, ry, rz, 각도)	지정한 각도만큼 회전한다.
rotateX(각도)	지정한 각도만큼 x축으로 회전한다.
rotateY(각도)	지정한 각도만큼 y축으로 회전한다.
rotateZ(각도)	지정한 각도만큼 z축으로 회전한다.
perspective(길이)	입체적으로 보일 수 있도록 깊잇값을 지정한다.

웹 요소를 이동시키는 translate( ) 함수

x 축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다.

종류	설명
transform: transalte(tx, ty)	x축으로 tx만큼, y축으로 ty만큼 이동한다. tx와 ty 2가지 값을 사용하지만 ty값이 주어지지 않으면 0으로 간주한다.
transform: transalte3d(tx, ty, tz)	x축으로 tx만큼, y축으로 ty만큼, 그리고 z축(앞뒤)으로 tz만큼 이동한다.
transform: transalteX(tx)	x축으로 tx만큼 이동한다. (= margin-left)
transform: transalteY(ty)	y축으로 ty만큼 이동한다. (= margin-top)
transform: transalteZ(tz)	z축으로 tz만큼 이동한다

특징
- translate 경우 겉으로 보기에는 margin 속성과 큰 차이가 없지만 margin의 경우 마우스를 올렸을 때 마우스 커서가 태그 밖으로 나가면 바로 다시 돌어 올려는 성질이 있지만 translate의 경우 마우스 커서를 올리면 커서가 태그 밖으로 나가도 끝까지 움직인다.
- translate의 경우 마우스 올리면 경로상에 다른 태그가 존재해도 무시하고 이동한다.
- margin은 경로상에 다른 태그가 존재하면 그 태그가 같이 밀리면서 이동한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>translate</title>
    <style>
        *{margin:0;padding:0;}
        
        div{width:300px;height:300px;margin-top:50px;transition:1s;}
        
        #a{background-color:red;/*transform:translateX(100px)*/}
        
        #b{background-color:blue;/*margin-left:100px;*/}
        
        #c{background-color: green;}
        
        /*#a:hover{transform:translateX(400px)}*/
        #a:hover{transform:translateY(400px)}
        /*#b:hover{margin-left:400px;}*/
        #b:hover{margin-top:400px;}
        
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>

요소를 확대/축소하는 scale( ) 함수

웹 요소를 지정한 크기만큼 확대하거나 축소한다.

괄호 안의 값(sx, sy, sz)이 1보다 크면 확대되고 1보다 작으면 축소된다.

종류	설명
transform: scale(sx, sy)	x축으로 sx만큼, y축으로 sy만큼 확대한다. 값이 하나뿐일 경우에는 x, y에 같은 값을 적용한다.
transform: scale(sx, sy, sz)	x축으로 sx만큼, y축으로 sy만큼, 그리고 z축으로 sz만큼 확대한다.
transform: scaleX(sx)	x축으로 sx만큼 확대한다.
transform: scaleY(sy)	y축으로 sy만큼 확대한다.
transform: scaleZ(sz)	z축으로 sz만큼 확대한다

특징
- 입력한 배수 값만큼 대상 태그의 크기를 조절하는 css속성으로 단순히 width, height를 사용해서 조절해주는 경우 한 방향으로만 크기가 길어진다.
- 하지만 scale을 사용하면 양쪽 방향으로 길이가 조절된다.
- width, heigth를 사용해서 크기를 조절해 줄 경우 다른 태그가 밀리거나 당겨지는 현상이 존재한다. 하지만 scale를 사용하면 다른 태그를 무시하고 커진다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>scale</title>
    <style>
        *{margin:0;padding:0}
        #a{width:800px;height:400px;
            border:3px solid red;
            margin:100px auto;}
        
        #b,#c{width:100px;height:100px;
                margin-top:50px;
                transition:2s}
        
        #b{background-color:blue;}
        #c{background-color:orange;}
        
        /*#a:hover #b{width:800px;height:800px;}*/
        
        #a:hover #c{transform:scale(8, 8)}
    </style>
</head>
<body>
    <div id="a">
        <div id="b"></div>
        <div id="c"></div>
    </div>
</body>
</html>

요소를 회전시키는 rotate( ) 함수

2차원 rotate( ) 함수
- 각도만 지정하면 된다.
- 함수는 웹 요소를 지정한 각도만큼 오른쪽(시계 방향)이나 왼쪽(시계 반대 방향)으로 회전시킨다.
```
transform: rotate(각도)
```
- rotate( ) 함수에서 지정할 수 있는 각도의 값은 일반적인 각도나 래디안을 사용하는데. 1 래디안은 180 º/π를 의미한다.
- 회전 각도가 양수일 경우 오른쪽으로 회전하고, 음수일 경우 왼쪽으로 회전한다.
3차원 rotate( ) 함수
```
transform: rotate(rx, ry, 각도)
transform: rotate3d(rx, ry, rz, 각도)
transform: rotateX(각도)
transform: rotateY(각도)
transform: rotateZ(각도)
```
- :hover 구문과 함께 사용해서 웹사이트에 버튼 등에 짤막한 애니메이션 효과를 넣어주는데 많이 사용한다.
- perspective 속성
▷ 함께 사용해서 원근감을 추가해 주면 회전 형태를 입체적으로 표현 할 수 있다.
▷ 3차원 변형에서 사용하는데, 원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향으로 잡아당기거나 밀어내는 원근감을 표현한다.
▷ 사용하는 값은 0보다 커야 하며, 원래 있던 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지를 픽셀 크기로 나타낸다.
(값이 클수록 사용자로부터 멀어진다.)
▷ 주의할 점은 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 한다는 것이다.

요소를 비틀어 왜곡하는 skew( ) 함수

지정한 각도만큼 요소를 비틀어 왜곡한다.

양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있다.

종류	설명
transform: skew(x각도, y각도)	첫 번째 값은 x축을 기준으로 비트는 각도이고, 두 번째 값은 y축을 기준으로 비트는 각도이다. 두 번째 값이 주어지지 않으면 y축 각도를 0으로 간주한다.
transform: skewX(x각도)	x축을 기준으로 주어진 각도만큼 비튼다.
transform: skewY(y각도)	y축을 기준을 주어진 각도만큼 비튼다

skewX( ) 함수는 각돗값이 양수면 왼쪽이 올라가고 오른쪽이 내려가는 형태이다.

skewY( ) 함수는 각돗값이 양수면 오른쪽이 올라가고 왼쪽이 내려가는 형태이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>skew</title>
    <style>
        div{width:400px;height:400px;
            background-color:#123456;
            margin-left:200px;
            margin-top:200px;
            transform:skew(50deg,50deg)}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

cf) transform-origin:% 값 %값
- 대상 태그의 중심축을 이동시켜주는 css속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>origin</title>
    <style>
        *{margin:0;padding:0}
        
        #a{width:400px;height:400px;
            border:3px solid black;
            margin:300px;}
        
        #b{background-color:blue;
            width:400px;height:400px;
            transition:2s;transform-origin:20% 100%;}
        
        #a:hover #b{transform:rotate(45deg)}
    </style>
</head>
<body>
    <div id="a">
        <div id="b"></div>
    </div>
</body>
</html>

728x90

저작자표시

'Front-End (웹) > CSS' 카테고리의 다른 글

글꼴 관련 스타일 (0)	2022.01.04
animation 속성 (0)	2021.09.07
드롭다운 메뉴 (1)	2021.09.01
z-index 속성 (0)	2021.09.01
transition 속성 (0)	2021.08.31

'Front-End (웹)/CSS' Related Articles

Comments

EverGiver

transform 속성 본문

transform 속성

'Front-End (웹) > CSS' 카테고리의 다른 글

티스토리툴바