더북(TheBook)

입체적으로 각도를 조정하는 skew( )

skew() 속성값은 선택된 태그의 각도를 입체적으로 조정할 때 사용합니다.

transform: skew(x, y);

 

첫 번째 숫자는 x축, 두 번째 숫자는 y축을 뜻합니다. x축의 각도 값이 양수면 오른쪽, 음수면 왼쪽으로 입력된 각도만큼 공간이 왜곡됩니다. y축의 각도 값이 양수면 아래쪽, 음수면 위쪽으로 공간이 왜곡됩니다.

<div id="transform_skew"></div>

 

예제 소스 Exercise/10장/1_transform/style.css

#transform_skew {
    width: 300px;
    height: 300px;
    background-color: yellow;
    background-image: url("transform_skew.png");
    transform: skew(10deg, 20deg);
    margin-left: 100px;
    margin-top: 100px;
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.