HTML, CSS

(68)CSS_transfrom

빠스무 2023. 4. 4. 15:39
728x90
 

(66)CSS_기본문법

trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을

jm-rograming.tistory.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transfrom</title>
    <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,pink,grey);
            /*오페라를 위한 코드*/
            background: -o-linear-gradient(left,pink,grey);
            /*익스플로러를 위한 코드*/
            background: -ms-linear-gradient(left,pink,grey);
            /*파이어 폭스를 위한 코드*/
            background: -moz-linear-gradient(left,pink,grey);
            /*CSS 표준 문법 코드*/
            background: linear-gradient(left,pink,grey);
        }

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