2월 27일 (1) CSS - transform, transition

transform(모양변환)

요소의 모양을 변화시키는 속성

속성값 (2D)

위치와 기울기 변환할 때만 '-' 단위 사용 가능하다.

1. 위치변환 - translate

translate(x, y) - 원래 위치에서 x, y 만큼 이동

보통 position으로 이동하고, translate는 동적인 변화를 줄 때 사용한다.

translateX(x) - x 축으로만 이동

translateY(y) - y 축으로만 이동

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모양 변환</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid;
            background-color: darkgoldenrod;
            margin-left: 50px;
        }
        .b1 {
            transform: translate(200px, 100px);
        }
    </style>
</head>
<body>
    <h2>위치 변환</h2>
    <div class="b1"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모양 변환</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid;
            background-color: darkgoldenrod;
            margin-left: 50px;
        }
        .b1 {
            /* transform: translate(200px, 100px); */
            /* transform: translateX(50px); */
            transform: translateY(-30px);
        }
    </style>
</head>
<body>
    <h2>위치 변환</h2>
    <div class="b1"></div>
    <h2>각도 변환</h2>
</body>
</html>

2. 각도변환 - rotate

단위 deg

기본방향 : 시계방향, '-' 반시계방향

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모양 변환</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid;
            background-color: darkgoldenrod;
            margin-left: 50px;
        }
        
    .b2 {
        transform: rotate(159deg);
        }

    </style>
</head>
<body>
    <h2>각도 변환</h2>
    <div class="b2"></div>
</body>
</html>

:hover 넣은 예제 (마우스를 가져다 대면 이동하는 모습이 나온다)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모양 변환</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: darkgoldenrod;
            margin-left: 50px;
            color: white;
            font-weight: bold;
        }
        .b1:hover {
            /* transform: translate(200px, 100px); */
            /* transform: translateX(50px); */
            transform: translateY(-30px);
        }
    .b2:hover {
        transform: rotate(159deg);
    }

    </style>
</head>
<body>
    <h2>위치 변환</h2>
    <div class="b1"></div>
    <h2>각도 변환</h2>
    <div class="b2">각도</div>
</body>
</html>

원으로 만들기 예제

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모양 변환</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: darkgoldenrod;
            margin-left: 50px;
            color: white;
            font-weight: bold;
        }

        .b1:hover {
            /* transform: translate(200px, 100px); */
            /* transform: translateX(50px); */
            transform: translateY(-30px);
        }

        .b2 {
            border-radius: 50%;
            padding: 10px;
            box-sizing: border-box;
        }

        .b2:hover {
            transform: rotate(159deg);
        }
    </style>
</head>

<body>
    <h2>위치 변환</h2>
    <div class="b1"></div>
    <h2>각도 변환</h2>
    <div class="b2">각도</div>
</body>

</html>

3. 크기변환 - scale

1은 원래 기본값, 테두리도 같이 두꺼워진다.

(가로, 세로), 소수 점 사용 시 축소된다.

배수로 변환

scale(x, y) : 너비, 높이 둘 다 변환scaleX(x) : 좌우로만 변환scaleY(y) : 위아래로만 변환

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모양 변환</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: darkgoldenrod;
            margin-left: 50px;
            color: white;
            font-weight: bold;
        }

        .b3:hover{
transform: scale(1, 2);
        }
    </style>
</head>

<body>
    <h2>크기 변환</h2>
    <div class="b3">3</div>
</body>

</html>

4. 기울기변환 - skew(각도)

마름모 만들 때 사용

단위 deg

skew(deg, deg) : x, y 축 모두 기울기 변환

skewX(x) : x축으로만 기울기 변환

skewY(y) : y축으로만 기울기 변환

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모양 변환</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: darkgoldenrod;
            margin-left: 50px;
            color: white;
            font-weight: bold;
        }

        .b4:hover {
            /* transform: skew(20deg, 20deg); */
            transform: skewX(20deg);
            transform: skewY(40deg);
         
        }
    </style>
</head>

<body>
    <h2>기울기 변환</h2>
    <div class="b4">4</div>
</body>

</html>

.b5:hover {

width: 100px;

}

기준점이 있는 상태(고정된 상태)에서 크기 변환 가능

tranform과의 차이점은 기준점이 다르다!

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모양 변환</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: darkgoldenrod;
            margin-left: 50px;
            color: white;
            font-weight: bold;
        }

        .b3:hover {
            /* transform: scale(2, 2); */
            /* transform: scaleX(0.5); */
            transform: scaleY(3);
        }

        .b5:hover {
            width: 100px;
        }
    </style>
</head>

<body>
    <h2>크기 변환</h2>
    <div class="b3">3</div>

    <h2>크기 변환2</h2>
    <div class="b5">5</div>
</body>

</html>

5. 종합변환함수 - matrix

martix (scaleX, skewY, skewX, scaleY, translateX, translatY)

크기, 기울기, 위치 변환을 합쳐놓은 함수

transition(변환 효과 - 속도 지연)

transform 너비/높이변화, 배경색/컬러 변화 등에 시간(초단위) 지연 효과를 주어 요소에 간단한 애니메이션 효과를 부여

슬라이드 만들 때 많이 사용한다.

1. transition-delay : 변환 시간을 지연

2. transition-duration : 변환 지속시간(시작부터 완료까지)

3. transition-proprerty : 시간을 지정할 변환 속성을 설정

4. transition-timing-function : 변환 기간의 시간을 함수로 처리

ease : 느린 시작, 빠른 진행, 느린 종료

linear : 일정한 시간(기본값)

ease-in : 느린 시작, 일정한 진행 및 종료

ease-out : 일정한 시작 및 진행, 느린 종료

esse-in-out : 느린 시작, 일정한 진행, 느린 종료

cubic-bezier.com

5. transtion : property, duration만 설정하는 단축속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transision</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid brown;
            background-color: green;
            color:white;
            transition-property: width, background-color, color; 
            transition-duration: 2s, 1s, 3s;
            transition-delay: 0.5s;
            transition-timing-function: ease;
        }
        div:hover {
            width: 300px;
            background-color: aquamarine;
            color:coral;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            color: aliceblue;
            transition: width 5s;
        }
        p:hover {
            width: 500px
        }
        .lin {
            transition-timing-function: linear;
        }
        .ease {
            transition-timing-function: ease;
        }
        .ein {
            transition-timing-function: ease-in;
        }
        .eout {
            transition-timing-function: ease-out;
        }
        .eio {
            transition-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
    <h2>Transition</h2>
    <div>글자 색도 바꾸기</div>
    <hr>
    <h2>Timing function</h2>
    <p class="lin">linear</p>
    <p class="ease">ease</p>
    <p class="ein">ease-in</p>
    <p class="eout">ease-out</p>
    <p class="eio">ease-in-out</p>
</body>
</html>

어떻게 효과를 지정하느냐에 따라서 다양하게 변환시킬 수 있다는 것이 재미있었다.

실습을 통해서 다양한 효과를 여러 번 연습해 보아야겠다.

문장 오타와 ; 꼭 붙이기!

저작자표시 비영리 변경금지

'공부기록 > CSS' 카테고리의 다른 글

vue3 타입스크립트 툴팁 만들기 (0)	2024.05.31
2월 24일 CSS - flexbox (0)	2023.02.24
2월 23일 (2) CSS selector 2, z-index, display, flex (0)	2023.02.23
2월 23일 (1) CSS clear, selector1 (0)	2023.02.23
2월 22일 (2) CSS 공간 처리 (0)	2023.02.22

새롭게 공부시작하기

2월 27일 (1) CSS - transform, transition

transform(모양변환)

transition(변환 효과 - 속도 지연)

'공부기록 > CSS' 카테고리의 다른 글

티스토리툴바

2월 27일 (1) CSS - transform, transition

transform(모양변환)

transition(변환 효과 - 속도 지연)

'공부기록 > CSS' 카테고리의 다른 글

관련글

티스토리툴바