transform 과 변형함수
기본형transform: 함수
웹 요소를 x축으로 50px, y축으로 100px 이동하는 클랙스 선택자 .photo 정의
.photo { transform: translate(50px, 100px); }2차원 변형과 3차원 변형
2차원 변형 은 웹 요소를 평면에서 변형. x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커짐. 3차원 변형 은 x축과 y축에 원근감을 주는 z축을 추가해서 변형. z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아짐.
웹 요소를 이동시키는 translate() 함수
①
transform: translate(tx, ty)
②transform: translate3d(tx, ty, tz)
③transform: translateX(tx)
④transform: translateY(ty)
⑤transform: translateZ(tz)
다음은 사용자가 도형 위로 마우스 포인터를 올려놓으면 x축 또는 y축으로 이동하고, 또는 동시에 이동하는 예제 코드임.
... 생략 ...
#movex:hover { transform: translateX(50px); } /*x축으로 50px 이동*/
#movey:hover { transform: translateY(20px); } /*y축으로 20px 이동*/
#movexy:hover { transform: translate(10px, 20px); } /*x축으로 10px, y축으로 20px 이동*/요소를 확대, 축소하는 scale() 함수
①
transform: scale(tx, ty)
②transform: scale3d(tx, ty, tz)
③transform: scaleX(tx)
④transform: scaleY(ty)
⑤transform: scaleZ(tz)
괄호 안의 값(tx, ty, tz)이 1 보다 크면 확대되고, 1보다 작으면 축소됨.
다음은 도형 위로 마우스 포인터를 올려 놓으면 크기가 변형되는 코드임.
...생략...
#scalex:hover { transform: scaleX(2); } /* x축으로 2배 확대 */
#scaley:hover { transform: scaleY(1.5); } /* y축으로 1.5배 확대 */
#scalexy:hover { transform: scale(0.7); } /* x, y축으로 0.7배 확대 */요소를 회전시키는 rotate() 함수
① 2차원 rotate() 함수
transform: rotate(각도)
각도의 값은 일반적인 각도(degree) 나 래디안(radian) 을 사용하는데, 이때 1 radian = 180/π을 의미함. 회전 각도가 양수일 경우 오른쪽으로 회전하고, 음수일 경우 왼쪽으로 회전함.
다음은 이미지를 오른쪽으로 40°, 왼쪽으로 40°만큼 회전한 예제 코드임.
...생략...
#rotate1:hover {
transform: rotate(40deg); /* 시계 방향(오른쪽)으로 40도 회전 */
}
#rotate2:hover {
transform: rotate(-40deg); /* 시계 반대 방향(왼쪽)으로 40도 회전 */
}② 3차원 rotate() 함수
①
transform: rotate(rx, ry, 각도)
②transform: rotate3d(rx, ry, rz, 각도)
③transform: rotateX(각도)
④transform: rotateY(각도)
⑤transform: rotateZ(각도)
perspective속성- 3차원 변형에서 사용하는데, 원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향으로 잡아당기거나 밀어내어 원근감을 표현함.
0보다 커야하며, 원래 있던 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지를픽셀 크기로 나타냄.값이 클수록 사용자로부터 멀어짐.- 변형하는 요소가 아니라
변형하는 요소의 부모 요소에 정의해야 함.
다음 예제는 x축을 기준으로 이미지를 회전시키켰을 때와 x축을 기준으로 회전시키는 동시에 perspective:300px 로 원근감을 주었을 때를 비교한 소스임.
...생략...
.rotatex:hover {
transform: rotateX(50deg); /* x축으로 50도 회전 */
}
#pers {
perspective:300px; /* 원근감 추가 */
}
...
<body>
<div class="origin">
<div class="rotatex">
<img src="../11/images/sunset.jpg" alt="">
</div>
</div>
<div class="origin" id="pers">
<div class="rotatex">
<img src="../11/images/sunset.jpg" alt="">
</div>
</div>
</body>요소를 비틀어 왜곡하는 skew() 함수
①
transform: skew(x각도, y각도)
②transform: skewX(x각도)
③transform: skewY(y각도)
다음 예제는 각각의 도형 위에 마우스 포인터를 올리면 x축으로 30° 비틀고, y축으로 15° 비틀었음. 마지막은 x축으로 -25°, y축으로 -15°를 비틀었음.
#skewx:hover { transform: skewX(30deg); } /* x축 기준으로 30도 비틀기 */
#skewy:hover { transform: skewy(15deg); } /* y축 기준으로 15도 비틀기 */
#skewxy:hover { transform: skew(-25deg, -15deg); } /* x축 기준으로 -25도, y축 기준으로 -15도 비틀기 */
