==transform==字面上就是变形，改变的意思。在css3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
一.语法
none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
二.2D变换
2.1 translate(位移)
1.1 translate(x,y):单位可以是px
1.2单位也可以是百分比，参照物是元素本身
1.3 参数可以是(x,y),x,y轴都位移
1.4 参数(x),设置x轴上得位移
2.1.1 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
translate([ x,y ]) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):
2.2.2 translateX(x)仅水平方向移动（X轴移动）；
2、translateX() ： 通过给定一个X方向上的数目指定一个translate。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px):
2.2.3 translateY(Y)仅垂直方向移动（Y轴移动）
3、translateY() ：通过给定Y方向的数目指定一个translate。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。如：transform:translateY(20px):
<style>
/*
一.位移：translate
1.1 translate(x,y):单位可以是px
1.2单位也可以是百分比，参照物是元素本身
1.3 参数可以是(x,y),x,y轴都位移
1.4 参数(x),设置x轴上得位移
*/
.box1 {
width: 100px;
height: 100px;
background-color: pink;
transition: all 1s;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
}
.box1:hover {
transform: translate(100px, 0)
}
.box2:hover {
transform: translate(100%, 0)
}
</style>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>
2.2 rotate旋转
rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
width: 800px;
height: 400px;
border: 1px solid pink;
}
#box {
margin: 100px auto;
width: 200px;
height: 200px;
background: pink;
transition: all 3s;
}
body:hover #box {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div id="box">
nmx
</div>
</body>
</html>
2.3 skew(倾斜)
2.3.1 skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）
skew( [, ]) ：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg):
2.3.2 skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewX() ： 按给定的角度沿X轴指定一个skew transformation（斜切变换）。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)
2.3.3 skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
skewY() ： 按给定的角度沿Y轴指定一个skew transformation（斜切变换）。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）
2.4 scale(缩放)
- 它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置
- 缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
2.4.1 scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放)
scale([x, y])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，==**如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。==**如：transform:scale(2,1.5):
2.4.2 scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleX() ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如：transform:scaleX(2):
2.4.3 scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scaleY() ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform-origin来改变元素的基点。如transform:scaleY(2):
<style>
/*
缩放scale
1.1 - 它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置
1.2 - 缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
1.3 **如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
*/
.div1 {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
transition: transform 2s;
/*
transform-orgin:center center
*/
transform-origin: left top;
}
.div1:hover {
transform: scale(2);
}
</style>
2.5 matrix矩阵变形
matrix(, , , , , ) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果有感兴趣的朋友可以去了解更深层次的martix使用方法，这里就不多说了。
2.6 transform-orgin改变元素基点
transfrom-origin转换原点
1.一个值：设置x轴原点
2.两个值：设置x轴和y轴的原点
3.默认原点在中心：center,center
4.属性值可以使百分比
5.属性值也可以是x轴为left,center,right,y轴为top,center,bottom
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样；下面我列出他们相对应的写法：
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于 50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%（默认值）
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%
其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变，我们分别来看看以下几个实例
(1)transform-origin:(left,top):
(2)transform-origin:right
(3)transform-origin(25%,75%)
2.7transform在不同浏览器内核下的书写规则
//Mozilla内核浏览器：firefox3.5+-moz-transform: rotate | scale | skew | translate ;//Webkit内核浏览器：Safari and Chrome-webkit-transform: rotate | scale | skew | translate ;//Opera-o-transform: rotate | scale | skew | translate ;//IE9-ms-transform: rotate | scale | skew | translate ;//W3C标准transform: rotate | scale | skew | translate ;
上面列出是不同浏览内核transform的书写规则，如果需要兼容各浏览器的话，以上写法都需要调用。
支持transform浏览器
同样的transform在IE9下版本是无法兼容的，之所以有好多朋友说，IE用不了，搞这个做什么？个人认为，CSS3推出来了，他是一门相对前沿的技术，做为Web前端的开发者或者爱好者都有必要了解和掌握的一门新技术，如果要等到所有浏览器兼容，那我们只能对css3说NO，我用不你。因为IE老大是跟不上了，，，，纯属个人观点，不代表任何。还是那句话，感兴趣的朋友跟我一样，不去理会IE，我们继续看下去。
二.3D变换
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！