CSS-2D-Transform

transform

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

        #translate{

            background-color: deeppink;

            transform: translate(30px, 50px);

        }

        #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;

 

✔ 벤더 프리픽스(vender prefix)

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

#gradient {

            background: 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);

            /*(css 표준문법 코드)*/

            background: linear-gradient(left, pink, gray);

 

 

transition

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

<style>

        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%;

        }

    </style>