고정 헤더 영역
상세 컨텐츠
본문
반응형
2차원 변형과 3차원 변형
- CSS3를 이용하면 스타일 시트 소스만으로 간단히 이미지를 변형할 수 있다.
- 이미지의 변형은 2차원 변형과 3차원 변형으로 나뉜다.
- 2차원 변형은 웹 요소를 변형 시킬 때 단순히 수평이나 수직으로 이동하고 회전한다.
- 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해 변형킨다.
transform과 변형 함수
- 이미지를 회전 시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용한다.
<html>
<head>
<meta charset="utf-8">
<style>
.photo {
width: 100px;
height: 100px;
transform: translate(50px, 100px);
}
</style>
</head>
<body>
<img src="fruit.png" class="photo">
</body>
</html>
2차원 변형 함수
- 2차원 변형 함수는 익스플로러 9를 비롯한 이전 브라우저를 위해 -webkit-과 -moz-, -ms-, -o- 등의 브라우저 접두사를 붙여야 한다.
- translate(tx, ty) : 지정한 크기만큼 x축과 y축으로 이동한다.
- translateX(tx) : 지정한 크기만큼 x축으로 이동한다.
- translateY(ty) : 지정한 크기만큼y축으로 이동한다.
- scale(sx, sy) : 지정한 크기만큼 x축과 y축으로 확대/축소한다.
- scaleX(sx) : 지정한 크기만큼 x축으로 확대/축소한다.
- scaleY(sy) : 지정한 크기만큼 y축으로 확대/축소한다.
- rotate(각도) : 지정한 각도만큼 회전한다.
- skew(ax, ay) : 지정한 각도만큼 x축과 y축으로 왜곡한다.
- skewX(ax) : 지정한 각도만큼 x축으로 왜곡한다.
- skewY(ay) : 지정한 각도만큼 y축으로 왜곡한다.
3차원 변형 함수
- 2차원 변형 함수에, z축을 추가하면 3차원 변형 함수가 된다.
- matrix3d(n, [, n]) : 4 x 4 행렬을 이용해 이동과 확대/축소, 회전 등의 변환을 지정한다.
- translate3d(tx, ty, tz) : 지정한 크기만큼 x축과, y축, z축으로 이동한다.
- translateZ(tz) : 지정한 크기만큼 z축으로 이동한다.
- scale3d(sx, sy, sz) : 지정한 크기만큼 x축과 y축, z축으로 확대/축소한다.
- scaleZ(sz) : 지정한 크기만큼 z축으로 확대/축소한다.
- rotate3d(rx, ry, rz, 각도) : 지정한 각도만큼 회전한다.
- rotateX(각도) : 지정한 각도만큼 x축으로 회전한다.
- rotateY(각도) : 지정한 각도만큼 y축으로 회전한다.
- rotateZ(각도) : 지정한 각도만큼 z축으로 회전한다.
- perspective(길이) : 입체적으로 보일 수 있는 깊이 값을 지정한다.
<html>
<head>
<meta charset="utf-8">
<style>
.box { border: 1px solid #000; }
.moveX:hover { transform: translateX(50px); }
.moveY:hover { transform: translateY(50px); }
</style>
</head>
<body>
<div class="box">
<div class="moveX"><img src="images/test.png"></div>
</div>
<div class="box">
<div class="moveY"><img src="images/test.png"></div>
</div>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS] 트랜지션 (0) | 2021.05.23 |
|---|---|
| [CSS] 변형과 관련된 속성들 (0) | 2021.05.17 |
| [CSS] 가상 클래스와 가상 요소 (0) | 2021.05.13 |
| [CSS 기초] 속성 선택자 (0) | 2021.05.12 |
| [CSS 기초] 연결 선택자 (0) | 2021.05.11 |
댓글 영역