CSS3中关于变形的一些处理

使用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 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 

这个参数可以改变变形基点，其属性值表示“基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置”。其中“基准点在元素水平方向上的位置”中可以指定的值为left，center，right，“基准点在元素垂直方向上的位置”中可以指定的值为top，center，bottom。

以上就是CSS3中关于变形的一些处理的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。