CSS变形
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS变形相关的知识，希望对你有一定的参考价值。
CSS变形
1.1 认识transform
2012年10月，W3C组织发布了CSS3变形工作草案，这个草案包括了CSS3 2D变形和CSS3 3D变形。在CSS3之前都需要依赖图片、Flash或javascript才能完成。现在，使用CSS3就可以实现这些变形效果：
1、无需加载额外的文件
2、提高了网页开发者的工作效率
3、提高了页面的执行速度
1.2 2D转换
1.2.1 transform用法
CSS3的变形（transform）属性可以让元素在一个坐标系统中变形。
基本语法格式：transform：none | transform-functions;
transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。
1.2.2 变形函数transform-function
1.2.2.1 matrix()定义矩形变换
matrix()基于X和Y坐标重新定位元素的位置，以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵。
格式为：
transform: matrix(a, b, c, d, e, f);
其中，六个参数默认值是matrix(1, 0, 0, 1, 0, 0)，这六个参数分别控制不同的变换：a：水平缩放、b：水平拉伸、c：垂直拉伸、d：垂直缩放、e：水平位移、f：垂直位移
例如，html文件中代码如下：
<div class="div1"></div>
CSS样式如下：
.div1{
width: 100px;
height: 100px;
background-color: pink;
transform: matrix(0, 1, 1, 1, 30, 20);
}
1.2.2.2 translate()移动元素对象
translate()基于X和Y坐标重新定位元素，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。当值为负数时，表示反方向移动元素。
格式为：
transform: translate(x, y);
也可以使用translateX()和translateY()来设置基于X轴或者基于Y轴的移动，但是二者不能同时使用。
translateX()：指定对象X轴（水平方向）的平移
translateY()：指定对象Y轴（垂直方向）的平移
格式为：
transform: translateX(移动距离);
transform: translateY(移动距离);
例如，HTML文件中代码如下：
<div class="div1"></div>
CSS样式如下：
.div1 {
width: 100px;
height: 100px;
background-color: blue;
transform: translate(200px, 100px);
}
该蓝色方块距离上方100像素，距离左边200像素。
1.2.2.3 scale()缩放元素对象
scale()可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。若是负数，先反转对象，然后缩放。
格式为：
transform: scale(x, y);
例如，HTML文件中代码如下：
<div class="div1"></div>
<div class="div2"></div>
CSS样式如下：
.div1 {
width: 100px;
height: 100px;
background-color: blue;
/*缩放该div*/
transform: scale(0.5, 0.8);
}
.div2 {/*未被缩放的div*/
width: 100px;
height: 100px;
background-color: pink;
}
1.2.2.4 rotate()旋转元素对象
rotate()旋转元素对象，取值为一个度数值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。角度单位：deg。
格式为：
transform: rotate(xdeg);/*x是数字*/
例如，HTML文件中代码如下：
<div class="div1"></div>
CSS样式如下：
.div1 {
width: 200px;
height: 100px;
background-color: blue;
/*顺时针旋转35度*/
transform: rotate(35deg);
}
1.2.2.5 skew()倾斜元素对象
skew()倾斜元素对象，取值为度数值。第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。角度单位：deg。
格式为：
transform: skew(x, y);
倾斜示意图：
例如，HTML文件中代码如下：
<div class="div1"></div>
CSS样式如下：
.div1 {
width: 100px;
height: 100px;
background-color: blue;
transform: skew(15deg, 20deg);
}
1.2.3 transform-origin中心点
变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。transform-origin属性包含三个参数，其默认值分别为50%，50%，0。
格式：
transform-origin: x y z;
其中，x定义视图被置于X轴的何处。可能的值有：left、center、right、length、%；y定义视图被置于Y轴的何处。可能的值有：top、center、bottom、length、%；z定义视图被置于Z轴的何处。可能的值有：length。
例如，HTML文件中代码如下：
<div class="div1"></div>
初始CSS样式如下：
.div1 {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
更改中心点的CSS样式如下：
.div1 {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
1.3 3D转换
1.3.1 rotateX()指定元素围绕X轴旋转
rotateX()函数用于指定元素围绕X轴旋转。
格式为：
transform: rotateX(a);
参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。
1.3.2 rotateY()指定元素围绕Y轴旋转
rotateY()函数指定一个元素围绕Y轴旋转。
格式为：
transform: rotateY(a);
参数a用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。
以上是关于CSS变形的主要内容，如果未能解决你的问题，请参考以下文章