Notice
«   2024/09   »
일 월 화 수 목 금 토
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
관리 메뉴

Jade_o.o

[css] transform & transition 본문

CSS

[css] transform & transition

by jade 2024. 1. 11. 15:46 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - transform & transition</title>
    <link rel="stylesheet" href="./attr6.css">
</head>
<body>
    <h2>tranceform</h2>
    <div class="img-box">
        <img src="./img/pooh.png" alt="pooh">
    </div>

    <h2>transition</h2>
    <!-- .box.box$*3 -->
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</body>
</html>

html 코드

 

.img-box{
    background-color: #9494ed;
    width:400px;
    height: 250px;
}

.img-box img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    border:1px solid gold;
    transition-duration: 10s;
}

.img-box img:hover{
    /* 1. skew()
        - 원하는 각도만큼 요소를 기울임
        - x,y축 나눠서 속성 부여 가능
        - skewX()
        - skewY()
    */
    transform: skewX(30deg);
    transform: skewY(30deg);
    transform: skew(30deg);

    /* 2. scale() 
        - 크기 조절 함수 (확대, 축소)
        - 1보다 크면 확대, 1보다 작은 소수는 축소
    */
    transform: scaleX(1.5);
    transform: scaleY(0.5);
    transform: scale(2, 0.5);

    /* 3. translate 
        -  이동
        - translateX() : X축으로 이동
        - translateY() : Y축으로 이동
        - translate() : X축, Y축 기준으로 이동
    */
    transform: translateX(50px);
    transform: translateY(50px);
    transform: translate(-50px, 10px);

    /* 4. rotate
    - 회전 (단위는 deg)
    - rotateX(), rotateY(): 각각 X축과 Y축 기준으로 회전
    - rotate(): 시계방향으로 회전
    */

    transform: rotate(90deg);
    transform: perspective(500px) rotateX(45deg);
    transform: perspective(400px) rotateY(180deg);
    backface-visibility: visible;
    /* backface-visibility: hidden; */
}

.box{
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: black;
}

.box1:hover{
    background-color: pink;
    height: 120px;
    width: 120px;

    /* duration 1s = 1초 동안 자연스럽게 변화*/
    transition-duration: 1s;

    /*3s = delay통해서 천천히 변화 */
    /*transition-delay: 3s;*/

    /* 가로 길이만 마우스 올릴 시 즉각 변하고 세로만 자연스럽게 변화*/
    /*transition-property: height;*/

    /*transition-timing-function: linear;*/
    transition-timing-function: ease;

}
.box2:hover{
    /* transition 단축 속성 */
    /* trahsition: property duration(필수) function delay */
    background-color: aqua;
    transform: translateX(1oopx) scaleX(2);

    /*transition: transform 0.5s linear 2s;*/
    /*transition: 2s 0.5s;*/
    transition: 2s;
}
.box3:hover{
    /* 0.6 = .6 */
    transition: .6s;
    /*opacity: 0;*/
    /*visibility: hidden;*/
    display: none;
}

css 코드

 

코드 실행 시 결과창

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

'CSS' 카테고리의 다른 글

[css] css 적용 방법  (0) 2024.01.11
[css] animation  (0) 2024.01.11
[css] display:flex  (2) 2024.01.11
[css] background 속성  (0) 2024.01.11
[css] position  (0) 2024.01.11
'CSS' Related Articles more