Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 자바 for문
- 자바 자동캐스팅
- 정보처리기사실기
- 자바
- 자바 public
- TypeScript
- 자바 향상된 for문
- 항해99 2기
- react with typescript
- java
- 이클립스 DB연동
- 자바 while문
- 변수
- 항해99
- react ag grid
- 프로그래머스
- 자바 삼항연산자
- Vue3
- 조코딩
- 자바 반복문
- 자바 스캐너
- 자바 구구단 출력
- Til
- 자바 if문
- 자바 switch문
- 자바 조건문
- MySQL
- 자바 공배수
- 자바 강제 캐스팅
- 타입스크립트
Archives
- Today
- Total
뇌 채우기 공간
[html][css] transform 2D속성 / 이동, 크기 변환, 회전, 기울기 본문
transform
요소의 변환 효과 (변형)을 지정
transform 속성은 하나고 여러가지 값을 적을 수 있음
여러 함수들이 존재한다.
2D속성
translate : 이동
- translate(x, y)
- translate(x)
- translate(y)
scale : 크기
- scale(x, y)
- scale(x)
- scale(y)
rotate(degree) : 회전
skew : 기울기
- skew(x-deg, y-deg)
- skew(x-deg)
- skew(y-deg)
martrix(n,n,n,n,n,n) : 모두 아우르는 것
<div class="box"></div>
.box{
width:100px;
height: 300px;
background: gray;
margin: 300px;
transform: rotate(45deg) ;
}
.box:hover{
width:300px;
background: dodgerblue;
}
.box{
width:100px;
height: 300px;
background: gray;
margin: 300px;
transition: 1s;
}
.box:hover{
transform: scale(1.5);
}
.box:hover{
transform: skewx(45deg);
}
728x90