目录
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属性