HTML,CSS

(45)CSS_CSS transform1

xoos0420 2023. 4. 10. 20:03

CSS 2D

 

transform

2차원 좌표에서 요소를 변형시키는 속성

  • translate : 이동
  • rotate : 회전
  • scale : 확대, 축소
  • skew : 경사, 비틀기

 

✔ 벤더 프리픽스(vender prefix)
- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사

 

W3C CSS 권고한에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임

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

해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가장 마지막에 작성해야 함

 

linear-gradien()

색상에 그라데이션을 입힘

 

<HTML>

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

<CSS>

 <style>
        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;
        }

        #gradient {
            background: pink;
            /*크롬, 엣지를 위한 코드*/
            background: -webkit-linear-gradient(left, gold, black);
            /* 오페라를 위한 코드*/
            background: -o-linear-gradient(left, gold, rgb(0, 0, 0));
            /* 익스플로러를 위한 코드*/
            background: -ms-linear-gradient(left, gold, black);
            /* 파이어폭스를 위한 코드*/
            background: -moz-linear-gradient(left, gold, black);
            /* CSS 표준 뭄법 코드*/
            background: linear-gradient(left, gold, black);
        }
    </style>