CSS3의 일부 변형 처리

변형 분류

• Scale

  스케일 방법을 사용하여 텍스트 또는 이미지의 크기를 조정하고 매개변수에서 크기 조정 비율을 지정합니다. 예를 들어 "배율(0.5)"은 50

• tilt

  기울기 방법을 사용하여 텍스트나 이미지의 크기를 조정하는 것을 의미합니다. 매개변수 값이 하나만 있는 경우 수평 방향의 기울기 각도이며 단위는 deg입니다.

  참고: rotate는 회전을 나타내며 수평 방향의 회전 각도를 나타내는 하나의 숫자 값입니다.

• Move

  텍스트나 이미지를 이동하려면 번역 방법을 사용하세요. 매개변수에 가로 이동과 세로 이동을 지정하세요. 값이 하나만 있으면 가로 이동입니다.

요소에 대한 여러 변형 방법

형식 예

 1 nbsp;html> 2  3  4     
 <meta> 5     
 <meta> 6     
 <meta> 7     
 <title>测试</title> 8  9 10 <section>a-section1-3-b</section>11 
 <section>section1-4-b</section>12 <style>13     
 [id $= &#39;b&#39;]{ /* id以b结尾的 */14         background-color: lightpink;15         
 -webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);16         
 -moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);17         
 -ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);18         
 -o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);19         
 transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);20         
 /*缩小50% 水平垂直方向倾斜30°（rotate只有水平旋转） 水平垂直移动30px*/21     }22     
 #a-section1-3-b{23         -webkit-transform-origin: left bottom;24         
 -moz-transform-origin: left bottom;25         -ms-transform-origin: left bottom;26         
 -o-transform-origin: left bottom;27         transform-origin: left bottom;28         
 /*更换变形原点*/     }
 </style>
  
 

변형 기준점 변환-원점

이 매개변수는 변형 기준점을 변경할 수 있으며 해당 속성 값은 "요소의 기준점 위치"를 나타냅니다. 요소의 가로 방향, 요소의 세로 방향 기준점의 위치입니다." 그 중 "요소의 가로방향 기준점의 위치"에서 지정할 수 있는 값은 왼쪽, 중앙, 오른쪽이고, "요소의 위치"에서 지정할 수 있는 값은 다음과 같다. 요소 수직 방향의 기준점"은 상단, 중앙, 하단입니다.

위 내용은 CSS3의 일부 변형 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!