HTML과 CSS/CSS

CSS - 2D 효과 추가(Transform, Transition)

큐트아리 2023. 10. 25. 10:20

1. Transform

trnasform 은 2차원 좌표에서 요소를 변형시키는 기능을 가진 속성입니다.

  • translate : 이동
  • rotate : 회전 (각도deg)
  • scale : 확대, 축소 (비율)
  • skew : 경사, 비틀기 (각도deg)

2. 벤더 프리픽스 (Vender Prefix)

벤더 프리픽스는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사입니다. w3c css 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙이고 원하는 새로운 기능을 작성하여 사용합니다.

2.1. 벤터 프리픽스 작성법

속성자 {
	적용되지 않을때 실행할 코드;
    벤더 프리픽스를 사용한 코드(버전별);
    표준화가 되었을때 사용할 코드;
    }

 

2.2. 벤터 프리픽스 상세 설정

  • -webkit- : 크롬, 엣지를 위한 접두사 
  • -o- : 오페라를 위한 접두사
  • -ms- : 익스프로러를 위한 접두사
  • -moz- : 파이어폭스를 위한 접두사

 

3. Transition

Transition은 요소에 추가할 css 스타일 전환 효과를 설정합니다.

{transition : 바꿀속성|all 적용할효과 설정들}
  • property : 요소에 추가할 전환 효과를 설정(linear, ease, ...)
  • timing-function : 전환 효과의 값 설정
  • duration : 전환 효과를 나타내는 시간을 설정
  • delay : 설정한 시간만큼 대기하다 전환 효과를 나타냄

<예시 코드 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform</title>
    <style>
        p {
            width: 600px;
            padding: 20px;
            border: 3px solid rgba(0, 0, 0, 0.5);
            background-color: burlywood;
        }
        #translate {
            transform: translate(30px,50px); 
            background-color: pink;
        }
        #rotate {
            transform: rotate(60deg); /*60도 회전*/
            background-color: cornflowerblue;
        }
        #scale {
            transform: scale(1.5,1); /*가로 1.5배 확대*/
        }
        #skew {
            transform: skew(30deg,0deg); 
            background-color: indianred; 
        }
        #gradient {
            background-color: pink; /*벤터프리픽스가 적용되지 않았을 경우 실행할 코드(이건 처음에)*/
            background: -webkit-linear-gradient(left, pink, gray);
            background: -o-linear-gradient(left,pink,gray);
            background: -ms-linear-gradient(left,pink,gray);
            background: -moz-linear-gradient(left,pink,gray);
            background: linear-gradient(left,pink,gray); /*추후에 표준화될때 사용할 코드(이건 맨 마지막에)*/

        }
    </style>
</head>
<body>
    <h2>transform</h2>
    <p>original</p>
    <p id="translate">translate</p>
    <p id="rotate">rotate</p>
    <p id="scale">scale</p>
    <p id="skew">skew</p>
    <p id="gradient">gradient</p>
</body>
</html>

<결과>

<예시 코드 2 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition1</title>
    <style>
        div.oo {
            width: 100px;
            height: 100px;
            float: left;
            margin: 30px;
        }
        #bg-tr {
            background-color: burlywood;
            transition: background-color ease 2s;
        }
        #border-tr {
            background-color: pink;
            border: 3px dotted black;
            transition: all linear 2s;
        }
        #bg-tr:hover {
            background-color: aquamarine;
            border: 3px dotted black;
        }
        #border-tr:hover {
            background-color: mediumslateblue;
            border: 3px dotted gray;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h2>transition1</h2>
    <div id="bg-tr" class="oo"></div>
    <div id="border-tr" class="oo"></div>
</body>
</html>

<결과>

transition1

transition1

블럭 위에 마우스를 올려놓으면 컬러가 변하는 것을 알 수 있습니다.

 

< 예시 코드 3 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition2</title>
    <style>
        /* 마진주고 로테이션주고 시간주고 */
        h2 {
            text-align: center;
        }
        #ex {
            margin: 0 auto;
            border: 2px solid black;
            width: 800px;
            height: 400px;
            padding: 30px;
        }
        p {
            text-align: center;
            font-weight: bold;
            padding-top: 60px;
        }

        .box{
            font-size: 20px;
            width: 150px;
            height: 150px;
            background-color: yellow;
            margin-bottom: 50px;
            
        }

        #ex:hover > .box {
            transform: rotate(720deg);
            margin-left: 650px;
        }

        #no-delay {
            transition-duration: 3s;
        }

        #delay {
            transition-delay: 1s;
            transition-duration: 3s;
        }
    </style>
</head>
<body>
    <h2>transition2</h2>
    <div id="ex">
        <div id="no-delay" class="box">
            <p>(❁´◡`❁)</p>
        </div>
        <div id="delay"class="box">
            <p>༼ つ ◕_◕ ༽つ</p>
        </div>
    </div>
</body>
</html>

< 코드 >

transition2

transition2

(❁´◡`❁)

༼ つ ◕_◕ ༽つ

노란 네모박스 위에 마우스를 올려놓으면 박스가 굴러다니는 것을 볼 수 있습니다.