正文
css笔记 - transform学习笔记(二)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
transform转换CSS transform
属于2D/3D上的转换、变形效果。他不是一个动画，他就是变形。比如正方形变平行四边形，再变圆形。都是形状变成另一个形状。
但是如果配合上transition/animation，他就会从一个形状变成另一形状。只要有一段时间内的过渡效果，就形成了动画。
主要功能有：拉伸变形、倾斜、位移、缩放、旋转。
原理是：改变元素的尺寸、形状、角度、位置等
js写法：
object.style.transform="rotate(7deg)";
transform-origin 设置元素的基点位置
该元素允许改变被转换元素的位置
默认不设置的情况下，x轴坐标是(border-width + padding + width) / 2 + 'px'，第二个坐标是(border-width + padding +height) / 2 + 'px';
transform-style 被嵌套元素在3D空间如何显示
规定被嵌套元素如何在3D空间中显示：
flat：表示子元素不保留3d位置、
preserve-3d表示 子元素保留3d位置
属性值： flat、preserve-3d、unset、inherit、initial
需要与transform一同使用。
transform的各个方法属性
| name | 含义 |
|---|---|
| none | 我不定义好不好 |
| translate() | 位移 |
| rotate() | 旋转 |
| scale() | 缩放 |
| skew() | 拉伸变形 |
| matrix() | 混合, 集百家之大乘。 |
方法可能的配置
skew：翻转给定的角度，xdeg水平翻转度数，ydeg垂直翻转度数。能为负
| D | name | 含义 | 中心点 | 备注 |
|---|---|---|---|---|
| 2 | skew(xdeg,ydeg) | 拉伸变形 | 默认中心点就是盒模型的中心点 | |
| 2 | skewX(xdeg) | 水平方向拉伸变形 | 同上 | |
| 2 | skewY(ydeg) | 垂直方向拉伸变形 | 同上 | |
| 2 | skew(n-deg) | 延伸，只写一个也起作用，不过是只默认作用于x轴水平拉伸。 | 同上 |
*可以为负值，负值时翻转拉伸的方向，比如之前是左上角－右下角拉伸，翻转后变成右上角－左下角的拉伸。
scale：x对应宽度，y对应高度，缩放到原来宽高的倍数。
| D | name | 含义 | 中心点 | 备注 |
|---|---|---|---|---|
| 2 | scale(x,y) | 缩放 | 默认中心点就是盒模型的中心点 | |
| 2 | scale(n-deg) | 缩放 | 默认中心点就是盒模型的中心点 | 和上边的区别就是默认只缩放水平方向，就像scaleX(x) |
| 3D | scale3d(x,y,z) | 缩放 | 同上 | 我设置三个点和设置正常的两个点没什么区别 |
| 2 | scaleX(x) | 横向缩放 | 同上 | 正值时横向拉伸，同skew的区别是：水平拉伸不带斜线角度 |
| 2 | scaleY(y) | 纵向缩放 | 同上 | 正值时竖向拉伸，同skew的区别是：垂直拉伸不带斜线角度 |
| 3D | scaleZ(z) | 纵深方向缩放 | 同上 | 2d图形设置没有多大的区别，不过可以看到文字微妙的变化 |
首先，缩放的倍数就是数字的实际倍数，比如写2就是放大两倍。再者，当数值是大于0的值时，就是放大。当数值在0-1之间的时候，就是缩小。所以 放大还是缩小看的是数值的关系，和正负没有关系。
数值为0就是原来的宽高*0时就看不见了。
数值为1是放大，但是是宽高*1，和没乘一样。还和原来一边大。
另外，计算时不光是乘宽高，内边距padding、边框宽度border-width、甚至外边距margin都跟着升天乘了相应倍数
rotate：N°旋转，正值顺时针旋转，负值逆时针旋转。
| D | name | 含义 | 中心点 | 备注 |
|---|---|---|---|---|
| 2 | rotate(angle) | 旋转 | 默认中心点就是盒模型的中心点 | angle值 |
| 3D | rotate3d(x,y,z,angle) | N°旋转 | 同上 | |
| 3D | rotateX(angle) | N°旋转 | 同上 | 围绕x轴做水平方向翻转 |
| 3D | rotateY(angle) | N°旋转 | 同上 | 围绕y轴做垂直方向翻转 |
| 3D | rotateZ(angle) | N°旋转 | 同上 |
translate(x,y)：相对于当前位置向水平(x)/垂直(y)方向移动，正值向右/下，负值向左/上
| D | name | 含义 | 中心点 | 备注 |
|---|---|---|---|---|
| 2 | translate(x,y) | 2d两点位移 | 默认中心点就是盒模型的中心点 | |
| 3D | translate3d(x,y,z) | 3d三点位移 | 同上 | |
| 2 | translateX(x) | 只是用 X 轴的值位移 | 同上 | |
| 2 | translateY(y) | 只是用 Y 轴的值位移 | 同上 | |
| 3D | translateZ(z) | 只是用 Z 轴的值位移 | 同上 |
括号里边， 数值后边一定要有单位值 ，如果没有单位值不起作用
translate执行的位移，对于周围的元素不产生任何影响。就像relative的效果。
matrix(n,n,n,n,n,n)
| D | name | 含义 | 中心点 | 备注 |
|---|---|---|---|---|
| 2 | matrix(n,n,n,n,n,n) | 矩阵，模型 | 默认中心点就是盒模型的中心点 | 6个值的矩阵 |
| 3D | matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 矩阵，模型 | 同上 | 16个值,4x4矩阵 |
perspective 规定3D元素的透视效果
张鑫旭讲解文章
perspective(n) 为3D转换元素设置透视视图
规定3D元素的透视效果
目前浏览器都不支持，只有safari和chrome用替代元素-webkit-perspective
只影响有3d转换属性的子元素，是加在父元素身上的。
需要配合perspective-origin一同使用。
perspective-origin 规定3D元素的底部位置
规定3D元素的底部位置 ？？
大致属性同perspective
perspective-origin : 50% 200px; 为什么第一个是百分比，第二个是像素值？可以有的值或格式：top,bottom,center,length,%。
x-axis 定义该视图在x轴上的位置、
y-axis 定义该视图在y轴上的位置
perspective-visibility 定义元素在不面对屏幕时是否可见
混合写法
多个属性值之间用逗号隔开即可。
transform: rotate(30deg) scale(.2) skew(20deg);
兼容性及写法
IE10+以上不用想，其他现代浏览器
chrome、safari要加前缀-webkit-
ie9加前缀-ms-
前缀
transform: ;
-moz-transform: ;
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
