【CSS】transform 속성 : 요소의 경사를 변형시킬 때 사용하는 skew

skew() 속성
transform:skew()	skew(X축의 기울기 각도, Y축의 기울기 각도). 2개의 각도에 따라 X축과 Y축에 따른 경사 변형을 지정합니다. 첫 번째 각도입니다. 두 번째 각도는 생략할 수 있지만,이 경우에는 "0"이 되고 Y축은 경사지지 않습니다.
transform:skewX()	각도에 따라 X축에 따른 경사 변형을 지정합니다.
transform:skewY()	각도에 따라 Y축에 따른 경사 변형을 지정합니다.

공통 CSS

 .skew1,.skew2,.skew3,.skew4{
  width: 300px; 
  padding: 20px; 
  background: #; 
  }

skew(45deg)

 .skew1	{
	-webkit-transform: skew(45deg);
	-moz-transform: skew(45deg);
	transform: skew(45deg);
	}

transform: skew(45deg);

skew(180deg)

 .skew2{
	-webkit-transform: skew(180deg);
	-moz-transform: skew(180deg);
	transform: skew(180deg);
	}

transform: skew(180deg);

skew(-20deg)

 .skew3{
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	transform: skew(-20deg);
	}

transform: skew(-20deg);

skew(10deg,-10deg)

 .skew4{
	-webkit-transform: skew(10deg,-10deg);
	-moz-transform: skew(10deg,-10deg);
	transform: skew(10deg,-10deg);
	}

transform: skew(10deg,-10deg);

스폰서 링크