CSS transform

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index9.css">
    <title>CSS - transform</title>
</head>
<body>
    <h1>CSS transform을 배워보자!</h1>

    <div class="dog">
        <img src="./image/dog.jpg" alt="">
    </div>
</body>
</html>

CSS 코드

.dog {
    /* 원래 위치를 파악하기 위한 배경색 */
    background-color: red;
    width: 300px;
    height: 300px;

    position: absolute;
    left: 50px;

}

img {
    /* 
        크기의 단위로 %를 사용
        : 부모 요소의 n% 차지
    */

    width: 100%;
    height: 100%;
}

img:hover {
    /* 
        transform 속성
        - 요소의 모양, 크기, 위치 등을 변경하는 데 사용.
    */

        /* 
            #1. skew()
            - 원하는 각도만큼 객체를 기울임.
            - x, y축 나누어 속성 부여 가능
                - skewX(x_deg)
                - skewY(y_deg)
            - x, y 동시 사용 원하는 경우
                - skew(x_deg, y_deg)
        */

    /* transform: skewX(30deg); */
    /* transform: skewY(-30deg); */
    /* transform: skew(30deg, 30deg); */

        /* 
            #2. scale()
            - 크기 조절 (확대, 축소)
            - 1보다 큼 : 확대
            - 0~1 : 축소 = 0.n 만큼 확대
        */

    /* transform: scaleX(2); */
    /* transform: scaleY(2); */
    /* transform: scale(0.5); */
    /* transform: scale(2, 0.5); */

        /* 
            #3. rotate()
            - 회전
            - 주어진 각도만큼 회전
            - rotateX() : x 축을 기준으로 회전.
            - rotateY() : y 축을 기준으로 회전.
            - rotate() : 시계방향으로 회전 (deg > 0)
        */

    /* transform: rotateX(45deg); */
    /* transform: rotateY(45deg); */
    /* transform: rotate(45deg); */

        /* 
            #4. translate()
            - 이동
            - translateX() : x축을 기준으로 이동.
            - translateY() : y축을 기준으로 이동.
            - translate() : x, y축을 기준으로 이동.
        */

    /* transform: translateX(-100px); */
    /* transform: translateY(100px); */
    /* transform: translate(50px, 50px); */
    /* transform: translate(-50px, -50px); */

    /* 
        transition 속성
        - CSS 요소의 속성값이 변화 할 때 일정 시간동안 부드럽게 변화가 일어나도록 설정
        - transform 속성과 함께 자주 쓰인다.
    */
    transform: scale(1.2);
    transition: transform 1s;
    /* 이미지가 변화 할 때 1초 동안 부드럽게 변환됨. */
}

CSS의 transform 속성은 요소의 모양, 크기, 위치 등을 변경하는 데 사용됩니다.

transform 속성: 요소의 변형

transform 속성은 요소를 다양한 방식으로 변형할 수 있습니다. 주요 기능으로는 skew, scale, rotate, translate 등이 있습니다.

.dog {
    /* 원래 위치를 파악하기 위한 배경색 */
    background-color: red;
    width: 300px;
    height: 300px;

    position: absolute;
    left: 50px;
}

img {
    /* 크기의 단위로 %를 사용 : 부모 요소의 n% 차지 */
    width: 100%;
    height: 100%;
}

img:hover {
    /* transform 속성 - 요소의 모양, 크기, 위치 등을 변경하는 데 사용. */
    transform: scale(1.2);

    /* 이미지가 변화할 때 1초 동안 부드럽게 변환됨. */
    transition: transform 1s;
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index9.css">
    <title>CSS - transform</title>
</head>
<body>
    <h1>CSS transform을 배워보자!</h1>

    <div class="dog">
        <img src="./image/dog.jpg" alt="">
    </div>
</body>
</html>

.dog 클래스는 배경색이 빨간색인 300x300 크기의 박스를 생성하며,
img 요소는 100% 설정으로 부모 요소의 크기에 맞춰집니다.
img:hover에서는 마우스를 이미지에 올렸을 때 transform: scale(1.2);로 이미지를 1.2배 확대하며,
transition 속성으로 1초 동안 부드럽게 변형되도록 설정합니다.

transform 기능 소개

skew(): 요소를 기울입니다.
- skewX(x_deg): X축을 기준으로 기울임.
- skewY(y_deg): Y축을 기준으로 기울임.
- skew(x_deg, y_deg): X축과 Y축을 기준으로 기울임.
```
 img:hover {
     transform: skew(30deg, 30deg);
     transition: transform 1s;
 }
```
scale(): 요소의 크기를 조절합니다.
- scaleX(n): X축 크기 조절.
- scaleY(n): Y축 크기 조절.
- scale(n): X축과 Y축 크기 동시 조절(배율).
```
 img:hover {
     transform: scale(1.5);
     transition: transform 1s;
 }
```
rotate(): 요소를 회전시킵니다.
- rotate(deg): 시계 방향으로 회전.
- rotateX(deg): X축을 기준으로 회전.
- rotateY(deg): Y축을 기준으로 회전.
```
 img:hover {
     transform: rotate(45deg);
     transition: transform 1s;
 }
```
translate(): 요소를 이동시킵니다.
- translateX(px): X축을 기준으로 이동.
- translateY(px): Y축을 기준으로 이동.
- translate(x, y): X축과 Y축을 기준으로 이동.
```
 img:hover {
     transform: translate(50px, 50px);
     transition: transform 1s;
 }
```

transition 속성

transition 속성은 CSS 요소의 속성값이 변화할 때 일정 시간 동안 부드럽게 변화가 일어나도록 설정합니다. transform 속성과 함께 자주 사용됩니다.

img:hover {
    transform: scale(1.2);
    transition: transform 1s;
    /* 이미지가 변화할 때 1초 동안 부드럽게 변환됨. */
}

위의 코드에서는 transform 속성의 변화를 1초 동안 부드럽게 적용하도록 설정하여, :hover 설정으로 사용자가 마우스를 올렸을 때 이미지가 자연스럽게 확대되도록 합니다.