transform & transition

1. 사용 용도

Element(html 정보)를 다채롭게 만들기 위함

2. transform & transition

(transform)

Element(html 정보)의 모양이나 위치를 변형하는 속성

(transition)

Element(html 정보)에 변형 효과를 주는 속성

3. 속성 실습

1. Element(html 정보)를 넣어준다.

1
2
3
4
5
<body>
    <div id="background">
        <div id="main">abc</div>
    </div>
</body>
cs

2. css 정보를 넣어준다.

1
2
3
4
5
6
7
8
9
<style>
    #background {
        background : #000fff;
    }
    #main {
        font-size : 100px;
        background : #fff000;
    }
</style>
cs

3. 결과

4. CSS 정보 변경

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    #background {
        background : #000fff;
    }
    #main {
        font-size : 100px;
        background : #fff000;
        transition : all 1s;
    }
    #main:hover {
        transform : scale(0.5)
    }
</style>
cs