transform
- 2차원 좌표에서 요소를 변형시키는 속성
translate: 이동
rotate : 회전
scale : 확대, 축소
skew : 경사, 비틀기
HTML 예제 코드
<!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>tansform</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-color: 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>
결과
✔참조
벤더 프리픽스(vender prefix)
- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 블라우저에 그 사실을 알리기 위해 사용하는 접두사
-W3C CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임
-webkit- : 크롬,엣지를 위한 접두사
-o- : 오페라를 위한 접두사
-ms- : 익스플로러를 위한 접두사
-moz- : 파이어 폭스를 위한 접두사
-해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법코드는 가장 마지막에 작성해야 함
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_animation (0) | 2023.04.03 |
|---|---|
| CSS_transition (0) | 2023.04.03 |
| CSS_미디어 쿼리 (1) | 2023.03.30 |
| CSS_Felx 레이아웃 (0) | 2023.03.30 |
| CSS_다단 레이아웃 (0) | 2023.03.30 |
