Transform
Transform 속성
1. scale() : X 또는 Y축으로 확대/ 축소
transform: scaleX(2); /* X축으로 비율만큼 확대, 축소 */
transform: scaleY(2); /* y축으로 비율만큼 확대, 축소 */
transform: scale(2, 2); /* x축, y축으로 비율만큼 확대, 축소 */
2. rotate() : 지정 요소 회전
transform: rotateX(15deg); /* x축 기준으로 15deg 만큼 회전 */
transform: rotateY(15deg); /* y축 기준으로 15deg 만큼 회전 */
transform: rotate(-15deg); /* -15deg 만큼 회전 */
3. translate() : 지정 요소 X 또는 Y축으로 이동
transform: translateX(10px); /* X축으로 이동 */
transform: translateY(10px); /* Y축으로 이동 */
transform: translate(20px, -10px); /* X축, Y축으로 이동 */
4. skew() : 지정 요소 X 또는 Y축으로 기울이기
transform: skewX(15deg); /* x축으로 15deg 만큼 기울이기 */
transform: skewY(15deg); /* y축으로 15deg 만큼 기울이기 */
transform: skew(15deg, 15deg); /* x축, y축으로 15deg 만큼 기울이기 */
transform-origin 속성
지정요소의 기준점 변경하기
transform-origin: right bottom; // px, 백분율(%), top, left, center, right, bottom
반응형
'UXUI Development > CSS' 카테고리의 다른 글
| [CSS] PNG, SVG 파일 CSS로 색상 변경하기 (0) | 2019.01.14 |
|---|---|
| [CSS] 페이지의 하단에 footer 고정 시키기 (0) | 2019.01.10 |
| [CSS] CSS Units 반응형 (em, rem, vw, vh, %) (0) | 2018.10.05 |
| [CSS3] Flexbox (display:flex, justify-conent, align-items, flex-grow, flex-basis) (0) | 2018.07.16 |
| [CSS3] Animation 애니메이션 CSS (@keyframes) (0) | 2018.07.16 |
| [CSS3] Transition CSS 트랜지션 (0) | 2018.07.05 |
| CSS 레이아웃 - position 속성 (0) | 2018.06.28 |
| CSS 레이아웃 - float 속성 (0) | 2018.06.28 |