CSS3의 일부 변형 처리-HTML 튜토리얼-php.cn

CSS3의 일부 변형 처리

零下一度

풀어 주다： 2017-06-28 09:25:47

원래의

1403명이 탐색했습니다.

변형 분류

Scale

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

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

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

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

요소에 대한 여러 변형 방법

형식 예

 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     
 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     
 <title>测试</title> 8 </head> 9 <body>10 <section id="a-section1-3-b">a-section1-3-b</section>11 
 <section id="section1-4-b">section1-4-b</section>12 <style>13     
 [id $= 'b']{ /* 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>
 </body> 
 </html>

로그인 후 복사

변형 기준점 변환-원점

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

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