(CSS) 2D

css 2D

transform

• 2차원 좌표에서 요소를 변형시키는 속성
• translate: 이돌
• rotate: 회전
• scale: 확대, 축소
• skew: 경사, 비틀기

CSS
    p {
        width: 600px;
        padding: 20px;
        border: 3px solid rgba(0, 0, 0, 0.5)
    }
    #translate {
        transform: translate(30px, 50px);
        background-color: deeppink;
    }
    #rotate{
        transform: rotate(60deg);
        background-color: gold;
    }
    #scale {
        transform: scale(1.5, 1.2);
        background-color: orange;
    }
    #skew {
        transform: skew(30deg, 15deg); /* (x축의 기울기 각도, y축의 기울기 각도) */
        background-color: yellowgreen;
    }

HTML
    <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>

translate는 기존위치에서 값만큼 이동 시키며, rotate는 값만큼 요소의 기울기가 바뀐다.
scale은 값만큰 확대하거나 축소 시킬 수 있으며, skew는 x축 기울기와 y축 기울기 값을 받아 조절한다.

 

✅ 벤더 프리픽스(vender prefix)

• 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사
• W3C CSS 권고한에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임
  • -webkit- : 크롬, 엣지를 위한 접두사
  • -o- : 오페라를 위한 접두사
  • -ms- : 익스플로러를 위한 접두사
  • -moz- : 파이어폭스를 위한 접두사
• 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법코드는 가장 마지막에 작성해야 함

/* 크롬, 엣지를 위한 코드 */
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);
/* CSS 표준 문법 코드 */
background: linear-gradient(left, pink, gray);

linear-gradient

• 색상의 그라데이션을 설정

transition

• 요소에 추가할 css 스타일 전환효과를 설정
• 추가할 전환효과나 지속시간도 설정
  • property: 요소에 추가할 전환효과를 설정
  • timing-function: 전환효과의 값을 설정
    • linear: 처음부터 끝까지 일정한 속도
    • ease: 전환효과가 천천히 -> 빨라지고 -> 천천히 -> 끝
  • durations: 전환효과를 나타내는 시간을 설정
  • delay: 설정한 시간만큼 대기하다 전환효과를 나타냄

 

CSS
    div {
        width: 100px;
        height: 100px;
        float: left;
        margin: 30px;
    }

    #bg-tr {
        background-color: gold;
        transition: background-color ease 2s;
    }

    #bg-tr:hover{
        background-color: red;
    }
    
    #border-tr {
        background-color: deeppink;
        border: 3px dotted black;
        transition: all linear 2s;
    }

    #border-tr:hover {
        background-color: pink;
        border: 3px dotted gray;
        border-radius: 50%;
    }

HTML
    <h2>transition1</h2>
    <div id="bg-tr"></div>
    <div id="border-tr"></div>

 

CSS
   h2 {text-align: center;}
   #ex{
       position: relative;
       width: 800px;
       height: 400px;
       margin: auto 0;
       border: solid black;
   }
   p {
       text-align: center;
       padding-top: 50px;
       font-weight: bold;
   }
   .box {
       font-size: 20px;
       position: relative;
       width: 140px;
       height: 140px;
       margin-bottom: 50px;
       background-color: pink;
   }
   #ex:hover > .box {
       transform: rotate(720deg);
       margin-left: 650px;
   }
   #no-delay{
       transition-duration: 3s;
   }
   #delay {
       transition-delay: 1s;
       transition-duration: 2s;
   }

HTML
    <h2>transition2</h2>
    <div id="ex">
        <div id="no-delay" class="box">
            <p>╰(*°▽°*)╯</p>
        </div>
        <div id="delay" class="box">
            <p>(❁´◡`❁)</p>
        </div>
    </div>