[CSS3] 2D Transform

2D Transform

이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다.

h1{
width:300px; height:300px; margin:20px; padding:20px; border:1px solid #dddddd;

}
.transformTest_translate{
  background:#e8e8e8;
  transform : translate(500px, -360px);
  -moz-transform : translate(500px, -360px);
  -webkit-transform : translate(500px, -360px);
  -ms-transform : translate(500px, -360px);
  -o-transform : translate(500px, -360px);
}
.transformTest_rotate{
  background:#cc00cc;
  transform:rotate(30deg);
  -moz-transform:rotate(30deg);
  -webkit-transform:rotate(30deg);
  -ms-transform:rotate(30deg);
  -o-transform:rotate(30deg);
}
.transformTest_scale{
  background:#ccff11;
  transform:scale(1.3, 0.7);
  -moz-transform:scale(1.3, 0.7);
  -webkit-transform:scale(1.3, 0.7);
  -ms-transform:scale(1.3, 0.7);
  -o-transform:scale(1.3, 0.7);
}
.transformTest_skew{
  background:#00ff00;
  transform:skew(30deg, 10deg);
  -moz-transform:skew(30deg, 10deg);
  -webkit-transform:skew(30deg, 10deg);
  -ms-transform:skew(30deg, 10deg);
  -o-transform:skew(30deg, 10deg);
}

See the Pen CSS 2d transform by daeyun (@daeyun) on CodePen.