transform知识【学习总结】

谁借莪１个温暖的怀抱￠ 2022-09-23 04:55 97阅读 0赞

# 1.旋转 rotate() #

旋转rotate()函数：通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

*  如果这个值为正值，元素相对原点中心顺时针旋转；
 *  如果这个值为负值，元素相对原点中心逆时针旋转。

如下图所示：   
![这里写图片描述][20160704165314127]

## 【例如】 ##

效果：   
![这里写图片描述][20160704165405049]

--------------------

# 2.扭曲 skew() #

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

*  rotate()函数只是旋转，而不会改变元素的形状；
 *  skew()函数不会旋转，而只会改变元素的形状。

## Skew()具有三种情况： ##

### ①skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； ###

![这里写图片描述][20160704172037545]   
第一个参数对应X轴，第二个参数对应Y轴。   
如果第二个参数未设置，则值为0，也就是Y轴方向上无斜切。

### ②skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； ###

![这里写图片描述][20160704174958001]

### ③skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形） ###

![这里写图片描述][20160704175143684]

## 【例如】 ##

通过skew（）函数将长方形变成平行四边形。

<code class="language-css hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/*css代码*/
 .wrapper {
 width: 300px;
 height: 100px;
 border: 2px dotted red;
 margin: 30px auto;
 }
 .wrapper div {
 width: 300px;
 height: 100px;
 line-height: 100px;
 text-align: center;
 color: #fff;
 background: orange;
 -webkit-transform: skew(45deg);
 -moz-transform:skew(45deg) 
 transform:skew(45deg);
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

效果：   
![这里写图片描述][20160704175305521]

--------------------

# 3.缩放 scale() #

缩放 scale()函数 让元素根据中心原点对对象进行缩放。

## 缩放 scale具有三种情况： ##

### ①scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） ###

![这里写图片描述][20160704181313830]

## 【例如】 ##

注意： Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

### ②scaleX(x)元素仅水平方向缩放（X轴缩放） ###

![这里写图片描述][20160704181635836]

### ③scaleY(y)元素仅垂直方向缩放（Y轴缩放） ###

![这里写图片描述][20160704181647508]

## 【例如】 ##

<code class="language-css hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/*css代码*/
 .wrapper {
 width: 200px;
 height: 200px;
 border:2px dashed red;
 margin: 100px auto;
 }
 .wrapper div {
 width: 200px;
 height: 200px;
 line-height: 200px;
 background: orange;
 text-align: center;
 color: #fff;
 }
 .wrapper div:hover {
 opacity: .5;
 -webkit-transform: scale(1.5);
 -moz-transform:scale(1.5)
 transform: scale(1.5);
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>

效果：   
![这里写图片描述][20160704181907057]

注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

--------------------

# 4.位移 translate() #

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

## translate我们分为三种情况： ##

### ①translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） ###

![这里写图片描述][20160704185653384]

### ②translateX(x)仅水平方向移动（X轴移动） ###

![这里写图片描述][20160704185707841]

### ③translateY(Y)仅垂直方向移动（Y轴移动） ###

![这里写图片描述][20160704185724842]

## 【例如】 ##

通过translate()函数将让不知道宽度和高度的元素实现水平、垂直居中。

<code class="language-css hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/*css代码*/
 .wrapper {
 padding: 20px;
 background:orange;
 color:#fff;
 position:absolute;
 top:50%;
 left:50%;
 border-radius: 5px;
 -webkit-transform:translate(-50%,-50%);
 -moz-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%);
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>

效果：   
![这里写图片描述][20160704190315292]

--------------------

# 5.矩阵 matrix() #

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个\[a b c d e f\]变换矩阵。   
　　就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素，此属性值使用涉及到数学中的矩阵。

> ax+cy+e表示变换后的水平坐标；   
> bx+dy+f表示变换后的垂直位置。   
> 其中：矩阵偏移元素的中心点是(x, y)

### 【例如】 ###

<code class="hljs rsl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">transform: matrix(1, 0, 0, 1, 30, 30); 
 /* a=1, b=0, c=0, d=1, e=30, f=30 */</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

假设矩阵偏移元素的中心点是(0, 0)，即x=0, y=0。   
　　于是，变换后的x坐标就是ax+cy+e = 1\*0+0\*0+30 =30；y坐标就是bx+dy+f = 0\*0+1\*0+30 =30。   
　　于是，中心点坐标从(0, 0)变成了→(30, 30)。即往右下方同时偏移了30像素。   
　　【结论】实际上transform: matrix(1, 0, 0, 1, 30, 30); 就等同于transform: translate(30px, 30px)；

注意： translate,rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。

--------------------

# 6.原点 transform-origin #

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：   
![这里写图片描述][20160704200943056]

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：   
![这里写图片描述][20160704201001615]

### 【例如】 ###

通过transform-origin 改变元素原点到左上角，然后进行顺时旋转45度。

<code class="language-html hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><div class="wrapper">
 <div>原点在默认位置处</div>
 </div>
 <div class="wrapper transform-origin">
 <div>原点重置到左上角</div>
 </div></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

<code class="language-css hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/*css代码*/
 .wrapper {
 width: 300px;
 height: 300px;
 float: left;
 margin: 100px;
 border: 2px dotted red;
 line-height: 300px;
 text-align: center;
 }
 .wrapper div {
 background: orange;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 }
 .transform-origin div {
 -webkit-transform-origin: left top;
 transform-origin: left top;
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

效果：   
![这里写图片描述][20160704201024975]

[20160704165314127]: /images/20220721/3e8613f5022a42189a087c54e883af85.png
[20160704165405049]: /images/20220721/20cb9f60d7f249d18ef724953042fe28.png
[20160704172037545]: /images/20220721/8424651cb2d248d7b4a2a24dbf84e63f.png
[20160704174958001]: /images/20220721/6ea89614bc4c472e83c9f1e2ffd28ea9.png
[20160704175143684]: /images/20220721/352967e6a891492687379b6c28bc2b6c.png
[20160704175305521]: /images/20220721/439640cb150c421db0359d803bc8a853.png
[20160704181313830]: /images/20220721/7b4bf53348fd43d3a7a51cdc2bd83089.png
[20160704181635836]: /images/20220721/6953f03fff954c92887327410e539abe.png
[20160704181647508]: /images/20220721/7153c2ded6b24cba810b25279fd19def.png
[20160704181907057]: /images/20220721/4886f4550c4545d195095e6721808371.png
[20160704185653384]: /images/20220721/64df6155660c41a381f056f6f2b66444.png
[20160704185707841]: /images/20220721/90e3be9b0350448fb95b2c0a74f10551.png
[20160704185724842]: /images/20220721/e794a3aa47634f5dbada5efc531e9519.png
[20160704190315292]: /images/20220721/109bc606d28340a9a12a2718cde434c7.png
[20160704200943056]: /images/20220721/76d1072bcf224f35822f65b405902b57.png
[20160704201001615]: /images/20220721/c4ffc71febd64196ab0eede315a9bbd5.png
[20160704201024975]: /images/20220721/0c7b09137a474591bd94b65773ac7410.png