CSS3中关于变形的一些处理

来源：动视网责编：小采时间：2020-11-27 15:30:50

CSS3中关于变形的一些处理

CSS3中关于变形的一些处理:变形分类缩放使用scale方法来实现文字或图像的缩放，在参数中指定缩放倍率。例如scale（0.5），表示缩小50倾斜使用skew方法来实现文字或图像的缩放，在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度，若只有一个数值，则为水平方向的倾斜角度，单位

推荐度：

点击下载本文 文档为doc格式

导读CSS3中关于变形的一些处理:变形分类缩放使用scale方法来实现文字或图像的缩放，在参数中指定缩放倍率。例如scale（0.5），表示缩小50倾斜使用skew方法来实现文字或图像的缩放，在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度，若只有一个数值，则为水平方向的倾斜角度，单位

变形分类

缩放

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