CSS 3 - 변형을 사용하여 변형을 만드는 방법

CSS 3를 사용하면 웹 사이트에서 iPhone 및 iPad에 표시 할 멋진 효과를 많이 만들 수 있습니다. CSS 3 변형 속성을 사용하면 요소를 변형하여 2D 및 3D에서 효과를 만들 수 있습니다. 변환 목록을 지정하여 요소의 여러 측면을 변경할 수 있습니다. 여러 옵션을 지정하면 각 옵션이 나열된 순서대로 적용됩니다. 변환 옵션에는 다음 목록에 설명 된 변환 옵션이 포함됩니다.

scale - 요소의 높이와 너비를 변경합니다. 너비와 높이에 대해 서로 다른 눈금을 정의하기 위해 두 개의 숫자를 지정할 수 있습니다. 그러나이 요소는 일반적으로 비례 적으로 요소의 크기를 조정하는 데 하나의 숫자로만 사용됩니다. 다음 예제 중 첫 번째는 요소를 크기의 절반으로 변환하고 두 번째 요소는 요소를 절반으로, 두 번째는 높이로 변환합니다.

• -webkit-transform: scale (0.5); -webkit-transform: scale (2, 0.5);

  translate -이 속성을 사용하여 요소를 위치 A에서 위치 B까지 x 및 y 축을 따라 균등하게
  

• , 이동하거나 이동합니다. translateX 및 translateY를 사용하여 한 번에 하나의 축을 따라 요소를 이동할 수도 있습니다. 예를 들어이 코드는 요소가 왼쪽에서 150 픽셀, 위쪽에서 150 픽셀 이동합니다.

  -webkit-transform: 번역 (150 픽셀, -150 픽셀);
  비뚤어 짐 -이 속성을 사용하여 x 및 y 축의 요소를 왜곡하는 지정된 값을 기반으로 요소의 위치를 ​​변경하거나

• 예를 들어 x 축에서 20도 기울이는 요소가있을 수 있습니다. -webkit-transform: skew (15deg, 4deg); rotate -이 속성을 사용하여 회전 각도를 제어하는 ​​지정된 값을 기반으로

  또는
  

• 요소의 위치를 ​​변경합니다. 예를 들어,이 코드의 첫 번째 예제는 요소를 오른쪽으로 5도 회전하고, 두 번째 요소는 요소 -5 (음의 5)도를 회전시킵니다. iPad / iPhone을 가로보기에서 세로보기로 전환하면 내용이 전체 화면을 채울 수 있도록 디자인 하단에 이미지가 있습니다.