这是我参与 8 月更文挑战的第 19 天，活动详情查看： 8月更文挑战
感激相遇 你好 我是阿ken
作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴。
🌊🌈关于内容：
9.2 变形
在 CSS3 之前，如果需要为页面设置变形效果，需要依赖于图片、Flash 或 JavaScript 才能完成。CSS3 出现后，通过 transform 属性就可以实现变形效果，如移动、倾斜、缩放以及翻转元素等。
9.2.1 认识 transform
2012年9月，W3C组织发布了 CSS3 变形工作草案，这个草案包括了 CSS 2D 变形和 CSS3 3D 变形。
CSS3 变形是一系列效果的集合， 如平移、旋转、缩放和倾斜，每个效果都被称作为变形函数(Tranfom
Fucio)，它们可以操控元素发生平移、旋转、缩放和倾斜等变化。这些效果在 CSS3 之前都需要依赖图片、Flash 或 Javascript 才能完成。现在，使用纯 CSS3 就可以实现这些变形效果，而无需加收额外的文件，这极大地提高了网页开发者的工作效率，提高了页面的执行速度。
CSS3 的变形（transform）属性可以让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以进行元素的移动、旋转和缩放。transform 属性的基本语法如下：
transform: none|transform-functions;
在上面的语法格式中，transform 属性的默认值为 none，适用于内联元素和块元素，表示不进行变形。transform-function 用于设置变形函数，可以是一个或多个变形函数列表。transform-function 函数包括 matrix()、translate()、scale()、rotate() 和 skew() 等。具体说明如下：
- matrix(): 定义矩形变换，即基于X和Y坐标重新定位元素的位置。
- translate(): 移动元素对象，即基于 X 和 Y 坐标重新定位元素。
- scale(): 缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数。负数和小数。
- rotate(): 旋转元素对象，取值为一个度数值。
- skew(): 倾斜元素对象，取值为一个度数值。
9.2.2 2D 转换 ( transform 属性 )
在 CSS3 中，使用 transform 属性可以实现变形效果，主要包括4种变形效果，分别是: 平移、缩放、倾斜和旋转。
1. 平移 ( translate() 方法 )
使用 translate() 方法能够重新定义元素的坐标，实现平移的效果。该函数包含两个参数值，分别用于定义 X 轴和 Y 轴坐标，其基本语法格式如下:
transform: translate (x-value, y-value);
在上述语法中，x-value 指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值 0。当值为负数时，表示反方向移动元素。
在使用 translate() 方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行移动。
案例：演示 translate() 方法的使用
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>translate() 方法</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
transform: translate(100px, 30px);
-ms-transform:translate(100px, 30px);
/* IE9浏览器兼容代码*/
-webkit-transform:translate(100px, 30px);
/*Safari and Chrome 浏览器兼容代码*/
-moz-transform:translate(100px, 30px);
/*Firefox浏览器兼容代码*/
-o-transform:translate(100px, 30px);
/*Opera 浏览器兼容代码*/
}
</style>
</head>
<body>
<div>我是元素原来的位置</div>
<div id="div2">我是元素平移后的位置</div>
</body>
</html>
在上述案例中，使用 < div> 标记定义两个样式完全相同的盒子。然后，通过 translate() 方法将第二个 < div> 沿X坐标向右移动100像素，沿Y坐标向下移动30像素。
2. 缩放 ( scale() 方法 )
scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。元素尺寸的增加或减少，由定义的宽度 ( X轴 ) 和高度 ( Y轴 ) 参数控制，其基本语法格式如下：
transform: scale(x-axis, y-axis);
在上述语法中，x-axis 和 y-axis 参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是翻转元素(如文字被反转), 然后再缩放元素。如果第二个参数省略，则第二个参数等于第一 个参数值。另外，使用小于1的小数可以缩小元素。
案例：演示 scale() 方法的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>scale() 方法</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
margin: 100px;
transform: scale(2, 3);
-ms-transform: scale(2,3);
/*IE9浏览器兼容代码*/
-webkit-transform: scale(2, 3);
/*Safari and Chrome浏览器兼容代码*/
-moz-transform: scale(2,3);
/*Firefox浏览器兼容代码*/
-o-transform: scale(2, 3);
/*Opera浏览器兼容代码*/
}
</style>
</head>
<body>
<div>我是原来的元素</div>
<div id="div2">我是放大后的元素</div>
</body>
</html>
在上述案例中，使用 < div> 标记定义两个样式相同的盒子。并且，通过 scale() 方法将第二个 < div> 的宽度放大两倍，高度放大三倍。
3. 倾斜 ( skew() 方法 )
skew() 方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义 X 轴和 Y 轴坐标倾斜的角度。skew() 可以将一个对象围绕着 X 轴和 Y 轴按照一定的角度倾斜，其基本语法格式如下。
transform: skew(x-angle, y-angle);
在上述语法中，参数 x-angle 和 y-angle 表示角度值，第一个参数表示相对于 X 轴进行倾斜，第二个参数表示相对于 Y 辅进行倾斜，如果省略了第二个参数，则取默认值 0。
案例：演示 skew() 方法的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>skew() 方法</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
transform: skew(30deg, 10deg);
-ms-transform: skew(30deg, 10deg);
/*IE9浏览器兼容代码*/
-webkit-transform: skew(30deg, 10deg);
/*Safari and Chrome浏览器兼容代码*/
-moz-transform: skew(30deg, 10deg);
/*Firefox 浏览器兼容代码*/
-o-transform: skew(30deg, 10deg);
/*Opera浏览器兼容代码*/
}
</style>
</head>
<body>
<div>我是原来的元素</d1v>
<div id="div2">我是倾斜后的元素</div>
</body>
</html>
在上述案例中，使用 < div> 标记定义了两个样式相同的盒子。并且，通过 skew() 方法将第二个 < div> 元素沿 X 轴倾斜 30°，沿Y轴倾斜 10°。
4. 旋转 ( rotate() 方法 )
rotate() 方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。其基本语法格式如下：
transform: rotate(angle);
在上述语法中，参数 angle 表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。
案例：演示 rotate() 方法的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>rotate() 方法</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/*IE9浏览器兼容代码*/
-webkit-transform: rotate(30deg);
/*Safari and Chrome浏览器兼容代码*/
-moz-transform: rotate(30deg);
/*Firefox 浏览器兼容代码*/
-o-transform: rotate(30deg);
/*Opera浏览器兼容代码*/
}
</style>
</head>
<body>
<div>我是元素原来的位置</div>
<div id="div2">我是元素旋转后的位置</div>
</body>
</html>
使用 < div>标记定义两个样式相同的盒子。并且，通过rotate() 方法将第二个 < div> 元素沿顺时针方向旋转30°。
- 注意:
_
如果一个元素需要设置多种变形效果，可以使用空格把多个变形属性值隔开。
5. 更改变换的中心点 ( transform-origin 属性 )
通过 transform 属性可以实现元素的平移、缩放、倾斜及旋转效果，这些变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用 transform-origin 属性，其基本语法格式如下:
transform-origin: x-axis y-axis z-axis;
在上述语法中，transform-origin 属性包含三个参数，其默认值分别为 50% 50% 0，
transform-origin 参数说明
| 参数 | 描述 |
|---|---|
| x-axis | 定义视图被置于x轴的何处。可能的值有：left、center、right、length、% |
| y-axis | 定义视图被置于Y轴的何处。可能的值有：top、center、bottom、length、% |
| z-axis | 定义视图被置于z轴的何处。可能的值有：length |
案例：演示 transform-origin 的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>transform-origin 属性</title>
<style type="text/css">
#div1 {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
padding: 10px;
border: 1px solid black;
}
#box02 {
padding: 20px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
/* 旋转 45° */
-webkit-transform: rotate(45deg);
/*Safari and Chrome 浏览器兼容代码*/
-ms-transform: rotate(45deg);
/*IE9 浏览器兼容代码 */
transform-origin: 20% 40%;
/*更改原点坐标的位置*/
-webkit-transform-origin: 20% 40%;
/*Safari and Chrome 浏览器兼容代码*/
-ms-transform-origin: 20% 40%;
/*IE9 浏览器兼容代码 */
}
#box03 {
padding: 20px;
position: absolute;
border: 1px solid black;
background-color: #FF0;
transform: rotate(45deg);
/* 旋转 45° */
-webkit-transform: rotate(45deg);
/*Safari and Chrome 浏览器兼容代码*/
-ms-transform: rotate(45deg);
/*IE9 浏览器兼容代码*/
}
</style>
</head>
<body>
<div id="div1">
<div id="box02">更改原点坐标位置</div>
<div id="box03">原来元素坐标位置</div>
</div>
</body>
</html>
在上述案例中，通过 transform 的 rotate() 方法将 box02、box03 盒子分别旋转 45。然后，通过 transform-origin 属性来更改 box2 盒子原点坐标的位置。
可以看出，box02、box03 盒子的位置产生了错位。两个盒子的初始位置相同，旋转角度相同，发生错位的原因是transform-origin 属性改变了 box02 盒子的旋转中心点。
今日入门学习暂时告一段落
Peace
🌊🌈往期回顾：
阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
阿ken的HTML、CSS的入门指南(十五)_表单的应用
阿ken的HTML、CSS的入门指南（十六）_多媒体技术
阿ken的HTML、CSS的入门指南（十七）_多媒体技术\
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（一）
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（二）
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（三）
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（四）
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（五）
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（六）
🌊🌈关于后记：
感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「关注」 谢谢支持❤
