-
(68)CSS_transfromHTML, CSS 2023. 4. 4. 15:39728x90
- transfrom 예제
- 아래 링크를 통해 각 태그의 설명을 볼 수 있다.
- https://jm-rograming.tistory.com/105
(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>
'HTML, CSS' 카테고리의 다른 글
(70)CSS_transition2 (2) 2023.04.04 (69)CSS_transition1 (0) 2023.04.04 (67)CSS_동적인 카페 소개 페이지 만들기 (0) 2023.04.04 (66)CSS_기본문법 (0) 2023.04.04 (65)CSS_미디어 쿼리 실전예제 (0) 2023.04.03