个人网站 免备案,大城 网站建设,乐清市做淘宝网站公司,dw做的网站怎么上传图片变形分类 缩放 使用scale方法来实现文字或图像的缩放#xff0c;在参数中指定缩放倍率。例如“scale#xff08;0.5#xff09;”#xff0c;表示缩小50 倾斜 使用skew方法来实现文字或图像的缩放#xff0c;在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度#xf…变形分类 缩放 使用scale方法来实现文字或图像的缩放在参数中指定缩放倍率。例如“scale0.5”表示缩小50 倾斜 使用skew方法来实现文字或图像的缩放在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度若只有一个数值则为水平方向的倾斜角度单位为deg。 注rotate表示的是旋转仅一个数值表示水平方向的旋转角度。 移动 使用translate方法来实现文字或图像的移动在参数中指定水平方向的移动与垂直方向的移动若只有一个数值则为水平方向的移动。 对一个元素的多种变形方法 格式示例 1 !DOCTYPE html2 html langzh-CN3 head4 meta http-equivcontent-type contenttext/html; charsetutf-85 meta http-equivx-ua-compatible contentIEedge6 meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno7 title测试/title8 /head9 body
10 section ida-section1-3-ba-section1-3-b/section
11 section idsection1-4-bsection1-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 /*更换变形原点*/
29 }
30 /style
31 /body
32 /html 变形基点transform-origin 这个参数可以改变变形基点其属性值表示“基准点在元素水平方向上的位置基准点在元素垂直方向上的位置”。其中“基准点在元素水平方向上的位置”中可以指定的值为leftcenterright“基准点在元素垂直方向上的位置”中可以指定的值为topcenterbottom。 转载于:https://www.cnblogs.com/tinyTea/p/7084460.html
