http://127.0.0.1:5500/practice4/transform.html
더보기↓
더보기
/*
- transform은 회전, 확대와 같이 모양을 변경할 때 사용
- translate(x,y) : x,y만큼 이동
- translateX(x) : x축 값이 x만큼 이동, 좌/우로 이동
- translateY(y) : y축 값이 y만큼 이동, 상/하로 이동
- scale(w,h) : 가로방향으로 w배만큼 조절, 세로방향으로 h배 만큼 조절
- scaleX(w) : 폭을 w배 만큼 조절, 가로 길이 조절
- scaleY(h) : 높이를 h배 만큼 조절, 세로 길이 조절
- rotate(a) : a각도만큼 시계 방향 회전
- skewX(a) : x축 기준으로 x만큼 기울임
- skewY(y) : y축 기준으로 y만큼 기울임
- skew(x,y) : x축과 y축 방향으로 x,y만큼 기울임
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>transform 예제</title>
<style>
.box{width: 200px; height: 200px; border: 2px solid palevioletred; position: absolute;}
.box1{top: 20px; left: 20px; transition: 1s;}
.box1:hover{transform: translate(10px,10px);}
.box2{top: 20px; left: 240px; transition:1s;}
.box2:hover{transform: translateX(10px);}
.box3{top: 20px; left: 460px; transition:1s;}
.box3:hover{transform: translateY(10px);}
.box4{top: 20px; left: 680px; transition:1s;}
.box4:hover{transform: scale(2,4);}
.box5{top: 20px; left: 900px; transition:1s;}
.box5:hover{transform: scaleX(2);}
.box6{top: 240px; left: 20px; transition:1s;}
.box6:hover{transform: scaleY(4);}
.box7{top: 240px; left: 240px; transition:1s;}
.box7:hover{transform: rotate(-60deg);}
.box8{top:240px; left: 460px; transition:1s;}
.box8:hover{transform: skewX(30deg);}
.box9{top:240px; left:680px; transition:1s;}
.box9:hover{transform: skewY(30deg);}
.box10{top:240px; left: 900px; transition:1s;}
.box10:hover{transform: skew(30deg,70deg);}
</style>
</head>
<body>
<div class="box box1">box1_translate(x,y)</div>
<div class="box box2">box2_translateX(x)</div>
<div class="box box3">box3_translateY(y)</div>
<div class="box box4">box4_scale(w,h)</div>
<div class="box box5">box5_scaleX(w)</div>
<div class="box box6">box6_scaleY(h)</div>
<div class="box box7">box7_rotate(a)</div>
<div class="box box8">box8_skewX(a)</div>
<div class="box box9">box9_skewY(y)</div>
<div class="box box10">box10_skew(x,y)</div>
</body>
</html>
'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_list-style 관련속성 (0) | 2021.06.13 |
|---|---|
| CSS_overflow, text-overflow(말줄임 표시) (0) | 2021.06.13 |
| CSS_transition (0) | 2021.06.12 |
| CSS_z-index (0) | 2021.06.12 |
| CSS_홈페이지 메인페이지 등분하기 (0) | 2021.06.12 |