CSS3의 일부 변형 처리
- 零下一度원래의
- 2017-06-28 09:25:471348검색
변형 분류
-
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.