<!DOCTYPE html>
<html>
<head>
<style>
h1{
background-color:deepskyblue;
color:white;
display:inline-block;
padding:5px;
font-size:3rem;
margin:100px;
transform:
scale(0.5,0.5)
}
</style>
</head>
<body>
<h1>Hello Transform!</h1>
</body>
</html>
transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다.
display:inline-block을 하면 블록과 인라인의 속성을 모두 갖는다
transform:scale(2)는 두배로 늘렸다는 뜻이다 scaleX는 X축의 변화 scaleY는 Y축의 효과를 주는 것이다
scale(0.5,0.5)는 x축과 y축을 1/2씩 줄였다는 뜻이다
transform2
트랜스폼을 하기 위해서는 단위가 필요하다
deg=degrees
rad=radians
turn=회전수
translate=이동
length-percentage:길이의 비율 px em rem 등이 있다
transform-origin은 세자리를 쓸 수 있는데 100 0 0 0 100 0 0 0 100 등이 있다
transform은 2차원 transform 3차원 transform이 있다
참고Caniuse (트랜스폼을 현재 얼마나 많은 브라우저가 지원하고 있는지)
mdn transform
hover.css
CSShake
magic animation
댓글