标签：tom eset 方向 pre lang meta 图像 center type
使用scale方法来实现文字或图像的缩放，在参数中指定缩放倍率。例如“scale（0.5）”，表示缩小50
使用skew方法来实现文字或图像的缩放，在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度，若只有一个数值，则为水平方向的倾斜角度，单位为deg。
注：rotate表示的是旋转，仅一个数值，表示水平方向的旋转角度。
使用translate方法来实现文字或图像的移动，在参数中指定水平方向的移动与垂直方向的移动，若只有一个数值，则为水平方向的移动。
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 <h3>变形分类</h3> 11 <section id="a-section1-3-b">a-section1-3-b</section> 12 <section id="section1-4-b">section1-4-b</section> 13 <style> 14 [id $= ‘b‘]{ /* id以b结尾的 */ 15 background-color: lightpink; 16 -webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 17 -moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 18 -ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 19 -o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 20 transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px); 21 /*缩小50% 水平垂直方向倾斜30°（rotate只有水平旋转） 水平垂直移动30px*/ 22 } 23 #a-section1-3-b{ 24 -webkit-transform-origin: left bottom; 25 -moz-transform-origin: left bottom; 26 -ms-transform-origin: left bottom; 27 -o-transform-origin: left bottom; 28 transform-origin: left bottom; 29 /*更换变形原点*/ 30 } 31 </style> 32 </body> 33 </html>
这个参数可以改变变形基点，其属性值表示“基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置”。其中“基准点在元素水平方向上的位置”中可以指定的值为left，center，right，“基准点在元素垂直方向上的位置”中可以指定的值为top，center，bottom。
标签：tom eset 方向 pre lang meta 图像 center type
原文地址：http://www.cnblogs.com/tinyTea/p/7084460.html
