[ 2D transforms ]
-ie10가능(ie10이하에서 쓰기위해 접두어 -를 붙여서 쓰기도 함)
translate:이동
rotate:회전
scale:확대/축소
skewX:기울이기X
skewY:기울이기Y
matrix:다하기
코드 보기 [더보기] 선택
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0227_css3_2Dtransforms</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-"/>
<meta name="author" content="-"/>
<style>
div{font-size:20px; font-weight:800; margin-bottom: 30px;}
/*[ 2D transforms ] ie10가능(ie10이하에서 쓰기위해 접두어 -를 붙여서 쓰기도 함*/
.translate{width: 100px; height: 100px; background-color: rebeccapurple; margin: 50px; }
.translate:hover{transform: translate( 50px, 100px) } /* x축, y축 */
.rotate{width: 100px; height: 100px; background-color: yellow; margin: 50px; }
.rotate:hover{transform: rotate( 45deg )} /*deg는 각도*/
.scale{width: 100px; height: 100px; background-color: burlywood; margin: 50px; }
.scale:hover{transform: scale( 2, 1.5 )} /* 1(기본값)을 기준으로 x축으로 2배, y축으로 1.5배 */
.skewX{width: 100px; height: 100px; background-color: skyblue ; margin: 50px; }
.skewX:hover{ transform: skewX( 20deg )}
.skewY{width: 100px; height: 100px; background-color: skyblue ; margin: 50px; }
.skewY:hover{ transform: skewY( -20deg )}
.matrix{width: 100px; height: 100px; background-color: greenyellow; margin: 50px; }
.matrix:hover{transform: matrix( 1, -0.5, 0, 1 , 0, 0)} /* 6개의 함수를 가지고 한번에 표현할 때 사용 matrix(scaleX 값, skewY 값 ,skewX 값 ,scaleY 값 , translateX 값 , translateY 값 ) */
</style>
</head>
<body>
<h3> [ 2D transforms ] </h3>
<h4>-ie10가능(ie10이하에서 쓰기위해 접두어 -를 붙여서 쓰기도 함)</h4>
<div class="translate">translate:이동</div>
<div class="rotate">rotate:회전</div>
<div class="scale">scale:확대/축소</div>
<div class="skewX">skewX:기울이기X</div>
<div class="skewY">skewY:기울이기Y</div>
<div class="matrix">matrix:다하기</div>
</body>
</html>
