CSS3变形是什么

css3变形指的是利用transform属性对元素进行旋转、扭曲、缩放、位移、矩阵、原点等类型的变形处理；元素的变形操作需要配合使用rotate()、skew()、scale()、translate()、matrix()等函数来实现。
本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
什么是css3变形
在css3中，可以利用transform功能来实现文字或图像的旋转、扭曲、缩放、位移、矩阵、原点这六种类型的变形处理，下面将详细讲解transform的使用。
变形–旋转 rotate()
div.box{transform: rotate(45deg);} /*顺时针旋转45度*/
变形–扭曲 skew()
div.box{transform:skew(45deg);} /*通过skew（）函数将长方形变成平行四边形。*/
skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲（x轴和y轴同时按一定的角度值进行扭曲变形）；
2、skewx(x)仅使元素在水平方向扭曲变形（x轴扭曲变形）；
3、skewy(y)仅使元素在垂直方向扭曲变形（y轴扭曲变形）变形–缩放 scale()
div.box{transform: scale(1.5,0.5);}
缩放 scale 具有三种情况：
1、 scale(x,y)使元素水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）
2、scalex(x)元素仅水平方向缩放（x轴缩放）
3、scaley(y)元素仅垂直方向缩放（y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
变形–位移 translate()
div.box{transform: translate(50px,100px);} /* 通过translate()函数将元素向y轴下方移动50px,x轴右方移动100px。 */
translate我们分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是x轴和y轴同时移动）
2、translatex(x)仅水平方向移动（x轴移动）
3、translatey(y)仅垂直方向移动（y轴移动）
变形–矩阵 matrix ()
div.box{transform: matrix(1,0,0,1,100,100);} /* matrix() 6个属性的意思的：第一个宽度比例1就是原大小，第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜第三个是左右倾斜，数字和第二个一样的意思，第四个是高度比例1就是原大小，第五个是x方向的像素位移，x方向就是左右，第六个是y方向的像素位移，x方向就是上下*/
变形–原点 transform-origin
div.box{transform-origin: left top;transform: rotate(45deg); }
改变元素原点到左上角，然后进行顺时旋转45度。
（学习视频分享：css视频教程）

什么是网站域名？为什么要申请网站域名？
网站建设工作中把握细节最重要
为什么别人建站挣大钱，而你却颗粒无收
东莞企业网站建设，网站关键词应该要如何布局？
中文域名介绍
为什么高端网站定制公司价格会比较高
东莞网站建设网关于网站友情链接的一点经验
营销网站建设中简单和标准化的代码是必不可少的！