목차
- transform 예제 - 요소 (회전/비틀기/크기확대) 변환
- transform 정의
- transform 구문
- transform 예제 - 1/2배로 축소
- transform 예제 - 허버 시 1.5배로 확대
- transform 예제 - 이미지 회전
- transform 예제 - 이미지 좌우반전
- transform 예제 - 텍스트 회전 (= 로고 회전)
- transform 예제 - position 속성 이용한 요소 중앙 정렬
- transform 예제 - 버튼 허버 시 뜬 효과 + 버큰 클릭 시 눌림 효과
transform 예제 - 요소 (회전/비틀기/크기확대) 변환
<style>
div.a {
width: 150px;
height: 80px;
background-color: yellow;
-ms-transform: rotate(15deg); /* IE 9 */
-webkit-transform: rotate(15deg); /* Safari 3-8 */
transform: rotate(15deg);
}
div.b {
width: 150px;
height: 80px;
background-color: yellow;
-ms-transform: skewY(15deg); /* IE 9 */
-webkit-transform: skewY(15deg); /* Safari 3-8 */
transform: skewY(15deg);
}
div.c {
width: 150px;
height: 80px;
background-color: yellow;
-ms-transform: scaleY(1.5); /* IE 9 */
-webkit-transform: scaleY(1.5); /* Safari 3-8 */
transform: scaleY(1.5);
}
</style>
<h2>transform: rotate(15deg)</h2>
<div class="a">Homzzang.com</div>
<br>
<h2>transform: skewY(15deg)</h2>
<div class="b">Homzzang.com</div>
<br>
<h2>transform: scaleY(1.5)</h2>
<div class="c">Homzzang.com</div>
결과보기
transform 정의
요소 (2차원 평면 + 3차원 입체) 변환.
1.
요소의 (회전, 반전, 크기 조절, 이동, 기울이기, 비틀기) 등 가능.
2.
- 기본값: none
- 상속여부: X
- 애니효과: O
- CSS버전: CSS3
- JS구문: object.style.transform="rotate(7deg)";
3.
- IE9 이상 최신 브라우저 지원.
- 2차원 평면 변환: IE10 이상 주요 최신브라우저 지원. (IE9 경우 -ms- 접두어 필요.)
- 3차원 입체 변환: IE12 이상 주요 최신브라우저 지원
4. MDN transform 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transform 구문
selector {transform: none|transform-functions|initial|inherit;}
[속성값]
※ 한번에 여러 속성값 사용하려면, 한칸 띄고 나열.
(예) transform: translate(-50%, -50%) rotate(90deg) scale(1.5);
none
변환 없음.
matrix (n, n, n, n, n, n)
6개 값의 행렬을 사용하여 2D 변환 정의.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
16개의 값으로 구성된 4x4 행렬 사용해 3D 변환 정의.
translate (x, y) ★
2D 상, 위치 이동. (예) translate(50px, -50px)
translate3d (x, y, z)
3D 상, 위치 이동.
translateX (x) ★
X축만 위치 이동. (예) translateX(50px)
translateY (y) ★
Y축만 위치 이동. (예) translateY(-50px)
translateZ (z)
Z축만 위치 이동.
scale (x, y) ★
X,Y축 크기 배율 변환. (예) scale(1.5, 1.5)
scale3d (x, y, z)
X,Y,Z축 크기 배율 변환.
scaleX (x) ★
X축 크기 배율 변환. (예) scaleX(1.5)
scaleY (y) ★
Y축 크기 배율 변환. (예) scaleY(1.5)
scaleZ (z)
Z축 크기 배율 변환.
rotate (angle)
2D 회전 정의. 각도는 매개변수에 지정.
rotate3d (x, y, z, angle)
3D 회전.
rotateX (angle)
X 축 따라 3D 회전.
rotateY (angle)
Y 축 따라 3D 회전.
rotateZ (angle)
Z 축을 따라 3D 회전.
skew (x-angle, y-angle)
X축 및 Y축 따라 2D 비틀기 변환.
skewX (angle)
X축을 따라 2D 비틀기 변환.
skewY (angle)
Y축 따라 2D 비틀기 변환.
perspective (n)
3D 변형 요소의 투시도 정의.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
transform 예제 - 1/2배로 축소
.pie {
transform: scale(0.5);
height: 200px;
width: 200px;
position: relative;
margin: 0 30px 30px 0;
}
결과보기
transform 예제 - 허버 시 1.5배로 확대
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box;}
.zoom {
padding: 50px;
background-color: pink;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
</style>
<div class="zoom">홈짱닷컴 Homzzang.com</div>
결과보기
transform 예제 - 이미지 회전
<style>
img {
width:40%;
}
img.b {
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
</style>
<img src="https://i.imgur.com/LbolCW8.png" class='a'>
<img src="https://i.imgur.com/LbolCW8.png" class='b'>
결과보기
transform 예제 - 텍스트 회전 (= 로고 회전)
<style>
.logo {
font-family: 'Arial', sans-serif;
font-size: 40px;
font-weight: bold;
color: #ff6600;
text-transform: uppercase;
position: relative;
}
.logo span {
display: inline-block;
transition: transform 1.5s ease;
}
.a, .b, .c, .d {
transform: rotateY(360deg);
}
.logo:hover span {
transform: rotateY(0deg);
cursor:pointer;
}
</style>
<div class="logo">
<span class="a">홈</span>
<span class="b">짱</span>
<span class="c">닷</span>
<span class="d">컴</span>
</div>
결과보기
transform 예제 - 이미지 좌우반전
https://homzzang.com/b/css-324
transform 예제 - position 속성 이용한 요소 중앙 정렬
<style>
div {
padding:50px;
width:300px;
color:white;
background:red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
box-sizing:border-box;
}
span {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, 400%);
box-sizing:border-box;
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
<span>홈페이지 제작 관리</span>
결과보기
transform 예제 - 버튼 허버 시 뜬 효과 + 버큰 클릭 시 눌림 효과
button:hover {transform: translateY(-4px);}
button:active {transform: translateY(0);}
예제보기
