目录
1.直接在CSS中写多个属性改变和在js中直接使用添加类名的方法改变属性。
移动translate、旋转rotate详解（3D中的详解）
用法：transform-origin: x-axis y-axis z-axis;
transition
transition用法
.example {
/* 需要过度的css属性 */
transition-property: background-color;
/* 过度所需要的时间 */
transition-duration: 2s;
/* 过度的类型 */
transition-timing-function: ease-in;
/* 过度延迟的时间 */
transition-delay: 1s;
}
/* 过渡简写: */
.example {
transition: background-color 2s ease-in 1s;
}transition属性为什么没有生效
1.直接在CSS中写多个属性改变和在js中直接使用添加类名的方法改变属性。
首先我们要知道transition属性是在浏览器完成加载CSS和JS中的代码后才能生效，所以我们写在CSS中的属性改变和在js中直接使用添加类名的方法改变属性只会覆盖。其实我们也可以反过来想一下，如果不设置生效时间，那我们写在transition属性后面的代码都会过渡，这就变成很不合理了。因此我们transition属性在CSS中通常搭配hover属性和动画属性，这些都是在生效后的改变，所以会有过渡。在js中通常搭配setTimeout、setInterval等定时器函数使用，因为这些函数会在CSS和JS代码加载完后运行。
2.设置了display等于none。
当设置了display:none时，页面文档流中将不会存在该元素，而transition无法对从无到有的元素进行显示。可以通过设置opacity解决。
transform
移动translate（2D）
用法：transform: translate(45px) 或者 transform: translate(45px, 150px)，参数表示移动距离，单位px，
一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
旋转rotate（2D）
用法：transform: rotate(45deg)，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
移动translate、旋转rotate详解（3D中的详解）
https://blog.csdn.net/AIWWY/article/details/116375851
缩放scale
用法：transform: scale(0.5) 或者 transform: scale(0.5, 2)，参数表示缩放倍数；
- 一个参数时：表示水平和垂直同时缩放该倍率
- 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
倾斜 skew
这里全部使用别人的原文，链接见最底部。
电脑屏幕的XY轴跟我们平时所说的直角坐标系是不一样的。如下图：
图上的盒子就是代表我们的电脑屏幕，原点就是屏幕的左上角，竖直向下为X轴正方向，水平向右为Y轴正方向。
先看图
每个图下方都有skew的参数。粗的红色的线分别是水平垂直方向上的投影，其长度与左边的未倾斜的边是相等的。而两个参数所代表的角度，就是图中黑色标记的角。从上面我们也可以看出来：skewx是代表与X轴倾斜的角度，方向是逆时针；skewY是代表与Y轴倾斜的角度，方向是顺时针。
但是要注意的是，例如当用skew(60,60)的时候，角度的算法不是上面那样的呢，因为当两个参数的角度都大于45的时候，其实我们看到的是图形的反面，也就是长和宽交换了位置。我们可以看图片上的MyDiv确实是倒的。
此时黄色的才才是投影的矩形，可以和左边的原图进行比较。而原来的粗的红色的线是错的，错的，错的！！！多说几遍先。而角度则是黑色的标出来的！
其他角度，大家也可以去推一推。
需要说明的是skew的默认原点 transform-origin 是这个物件的中心点。这也是我在第二行有一条橘黄色的细线，是为了寻找中心点，然后获取投影。
如果上面的你不能理解，就看我画的投影，首先知道角度是怎么标记的，然后记住这么一句话：不管它是一个方向倾斜，还是两个方向一起倾斜，最后的在X,Y轴上的投影长度是不变的，也就是参数都为 0 时候的长度。但是投影要注意旋转的角度。为了保持投影长度不变，所以就得拉长图形，也就是变形。所以如果你想通过动手实验的话，是得不出上面的结果，因为实际的不会变形。
matrix()函数
用法：transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);
transform: matrix(数值a,数值b,数值c,数值d,数值e,数值f)：
数值a：水平方向上的尺寸缩放
数值b：垂直方向上的倾斜率
数值c：水平方向上的倾斜率
数值d：垂直方向上的尺寸缩放
数值e：水平方向上的移动距离
数值f：垂直方向上的移动距离
使用transform属性的matrix()函数能够综合实现旋转、缩放、倾斜的2D变形。变形内容由6个数值决定，基准数值为matrix（1,0,0,1,0,0）,也就是说这时的坐标没有变化。如果需要3D变形，需要使用transform属性的matrix3d()函数。
变形原点transform-origin
这里全部使用别人的原文，链接见最底部。
transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，如下图所示：
我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的位置对元素进行变换操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
用法：transform-origin: x-axis y-axis z-axis;
transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。
一个值：必须是 <length><percentage>，或 left, center, right, top, bottom关键字中的一个。
两个值：其中一个必须是<length><percentage>，或left, center, right关键字中的一个。另一个必须是<length><percentage>，或top, center, bottom关键字中的一个。
三个值：前两个值和只有两个值时的用法相同。
第三个值必须是。它始终代表Z轴偏移量。
实例
1、以rotate()为例，设置不同的transform-origin，观察效果：
transform-origin取值为center（或center center或50% 或50% 50%或默认）：
transform-origin取值为top（或top center或center top或50％ 0）：
transform-origin取值为right(或right center 或center right 或 100％ 或 100％ 50％)：
transform-origin取值为bottom(或bottom center 或center bottom 或 50％ 100％)：
transform-origin取值为left(或left center或center left或0或0 50％):
transform-origin取值为top left(或left top或0 0)：
transform-origin取值为right top（或top right或100％ 0）：
transform-origin取值为bottom right（或right bottom或100％ 100％）:
transform-origin取值为left bottom（或bottom left 或 0 100％）:
注意：CSS3变形中重置元素的原点，位移translate()不受影响。
2、将transform-origin从中心点重置后，rotate()、skew()、scale()之间的效果：
rotate()：
skew()：
scale():
文章中引用原文链接
CSS3 transform 属性详解(skew, rotate, translate, scale) - huansky - 博客园
CSS3新属性篇(二)：transform-origin属性_madman0621的博客-CSDN博客_transform-origin属性
5087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
