고래씌

[CSS] 7. 변형 관련 스타일 본문

Front-End/CSS

[CSS] 7. 변형 관련 스타일

고래씌 2023. 11. 7. 10:08

1. 2차원 변형

 

▶ img태그는 원래 자신만의 width/height값을 가지고 있어서 한방향의 크기만 지정해도 남은 방향은 비율에 맞춰서 자동으로 저장된다. (width: auto, height : auto가 기본값)

 

▶ css 속성 작성시 크로스 브라우저(브라우저가 달라지는 경우) 처리방법

-ms- : 마이크로 소프트(IE, EDGE)

-webkit- : 크롬, 사파리

-o- : 오페라

-moz- : 파이어폭스

 

 

 

■ html 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13_변형관련 스타일</title>
    <link rel="stylesheet" href="resources/css/transform-style.css">
</head>
<body>

    <h1>2차원 변형</h1>

    <h3>좌우로 움직이기</h3>

    <img src="resources/image/cat.jpg" alt="" class="trans-x-2d">


    <h3>상하로 움직이기</h3>
    <img src="resources/image/dog1.gif" class="trans-y-2d">


    <h3>대각선으로 움직이기</h3>
    <img src="resources/image/animal2.gif" class="trans-d-2d">


    <h3>가로방향 확대/축소</h3>
    <img src="resources/image/animal3.gif" alt="" class="trans-x-scale-2d">


    <h3>세로방향 확대/축소</h3>
    <img src="resources/image/bono.jpg" alt="" class="trans-y-scale-2d">

    <h3>대각성방향 확대/축소</h3>
    <img src="resources/image/bono.jpg" alt="" class="trans-scale-2d">

    <h3>요소 회전</h3>
    <img src="resources/image/jun.png" alt="" class="trans-rotate">

</body>
</html>

 

 

1) 좌우로 움직이기(transform 이용)

■ transform-style.css 파일

.trans-x-2d:hover{
    -ms-transform: translateX(100px);
    -webkit-transform: translateX(100px);
    transform : translateX(100px);
}

 

 

2) 상하로 움직이기

■ transform-style.css 파일

.trans-y-2d:hover{
    -ms-transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
}

=> 겹쳐지더라도 이동된다

 

3) 대각선으로 움직이기

■ transform-style.css 파일

.trans-d-2d:hover{
    transform: translate(100px, -100px);
}

 

 

4) 가로방향 확대/축소

■ transform-style.css 파일

.trans-x-scale-2d:hover{
    transform: scaleX(2);
}

/* scale 세로 */
.trans-y-scale-2d:hover{
    transform: scaleY(2);
    margin:100px 0;
}

 

 

마우스 갖다대기 전
마우스 갖다 댄 후

 

 

 

5) 대각성방향 요소 확대/축소

■ transform-style.css 파일

.trans-scale-2d:hover{
    transform:scale(1, 2);
}

 

 

6) 요소 회전

■ transform-style.css 파일

/* 요소 회전 */
/* rotate(각도 deg) */
.trans-rotate:hover{
    transform: rotate(270deg);
}

 

 

2. 3차원 변형

■ html 파일

 

■ transform-style.css 파일

/* x, y, z축 이동 */
.trans-3d:hover{
    /* perspective : z축의 길이(원근법이 적용) */
    transform:perspective(200px) translate3d(50px, 50px, 100px);
}

.trans-rotate-x-3d:hover{
    transform:perspective(300px) rotateX(45deg);
}


.trans-rotate-y-3d:hover{
    transform: perspective(300px) rotateY(180deg);
}

.trans-rotate-z-3d:hover{
    transform: perspective(300px) rotateZ(45deg);
}

.trans-rotate-3d:hover{
    transform:perspective(300px) rotate3d(0.5, 0.5, 0.5, 45deg);
    /*
        rotate3d(x,y,z 각도)
        x,y,z 0~1 사이의 숫자
    */
}

 

 

3. 변형 사이에 지연시간 추가하기(transition)

■ html 파일

 

■ transform-style.css 파일

/* transition */
.box{
    width: 150px;
    height: 150px;
    border: 1px solid black;
    background-color: red;

    /* 스타일이 변경되는 시간 지정 */
    transition: 1s;

    /* 적용할 속성 all(기본값) */
    /* transition에 적용할 속성 */
    transition-property: all;
    /* transition-property : backgorund-color를 하게 되면
    배경색만 적용하도록 지정할 수 있다 */

}

.test1:hover{
    background-color: yellow;
}


/* 지연시간만 추가할때 transition-duration 사용 */
.test2{
    transition-duration: 3s;
}

.test2:hover{
    transform: rotate(360deg);
    background-color: skyblue;

    border-radius: 50%;
}

.test3{
    /* 지속시간 */
    transition-duration: 3s;

    /* 위에서 3초 동안 변경을 지연시켰는데 시간의 흐름에 따른 어떻게 진행시키는지 설정하는 것*/
    /* linear | ease(기본값) | ease-in | ease-out .... */
    transition-timing-function: ease-in-out;
}

.test3:hover{
    background-color: springgreen;
    transform: rotate(720deg);
}


.test4{
    /* 변형이 되기까지 대기시간 */
    transition-delay: 2s;
}

.test4:hover{
    transform: translateX(100px);
}

 

▶ transition-property : all;   => transition에 적용할 속성.

transition-property: background-color; 을 하게되면 배경색에만 지정함

 

▶ transition-duration : 3s;   => 지연시간

 

▶ transition-timing-function : ease-in-out       => 위에서 3초동안 변경을 지연시켰는데 시간의 흐름에 따라 어떻게 진행시키는지 설정하는 것

 

linear   |    ease(기본값)    |  ease-in  | ease-out 

 

▶ transition-delay : 2s; => 변형이 되기까지 대기시간

 

 

 

4. 애니메이션 관련 스타일

- 속성을 점차적으로 변화시켜 움직이는 효과를 내는 기법.

- transition과 비교했을 때 시작스타일과 끝 스타일을 부드럽게 이어주는 기능을 하는 것 같지만 애니메이션 중간에 원하는 위치에 @keyframes을 이용하여 중간 스타일을 지정 가능

 

▶ keyframes?

- 애니메이션 시작지점과 끝 지점의 스타일을 정하고 keyframes의 이름을 지정함.

- 시작 지점과 글 지정 두개만 설정할 경우 from, to로 설정.

- 중간에 작업이 더 있다면 %로 구분하여 설정한다.

 

[표현방법]

@keyframes 프레임명 {

      선택자 {스타일;}

}

 

 

■ html파일

 

■ transform-style.css 파일

.anitest1:hover{
    animation-name: ani;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.anitest2:hover{
    animation: ani2 5s infinite alternate;
}

@keyframes ani{
    /* 시작과 종료 지점 */
    from{
        width:500px;
        transform: perspective(100px) (100px, 100px)
    }
    to{
        transform: perspective(100px) (720deg)
    }
}

@keyframes ani2{
    0% {
        border : 3px solid black
    }
    30% {
        transform: translate(100px, 100px);
    }
    50% {
        border : 3px solid yellow;
        transform: scale(1.2);
    }
    100% {
        border : 3px yellow;
        transform: rotate(45deg);
    }
}

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

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

[CSS] 9. 시맨틱태그  (0) 2023.11.07
[CSS] 8. 웹문서 구조(실습)  (0) 2023.11.07
[CSS] 6. 글꼴(폰트)관련 스타일  (1) 2023.11.03
[CSS] 5. 글자관련 스타일  (1) 2023.11.03
[CSS] 4-3. FlexBox ③ (item 전용 속성-수축, 팽창 등)  (0) 2023.11.03
'Front-End/CSS' Related Articles more