Home > Article > Web Front-end > Some processing of deformation in CSS3
Some processing of deformation in CSS3
- 零下一度Original
- 2017-06-28 09:25:471345browse
Deformation classification
-
Scale
Use the scale method to scale text or images, and specify the scaling ratio in the parameters. For example, "scale (0.5)" means zooming out by 50
-
tilt
Use the skew method to achieve scaling of text or images, and specify the horizontal tilt angle in the parameter The tilt angle with the vertical direction. If there is only one value, it is the tilt angle with the horizontal direction. The unit is deg.
Note: rotate represents rotation. There is only one value, indicating the rotation angle in the horizontal direction.
-
Move
Use the translate method to move text or images. Specify the horizontal movement and vertical movement in the parameters. If there is only one value, then for horizontal movement.
Multiple transformation methods for an element
Format example
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>Transformation base point transform-origin
This parameter can change the deformation base point, and its attribute value represents "the position of the base point in the horizontal direction of the element, and the position of the base point in the vertical direction of the element." Among them, the values that can be specified in "the position of the reference point in the horizontal direction of the element" are left, center, and right, and the values that can be specified in "the position of the reference point in the vertical direction of the element" are top, center, and bottom.
The above is the detailed content of Some processing of deformation in CSS3. For more information, please follow other related articles on the PHP Chinese website!