csstransform属性,csstransform属性移动

12.CSS3的Transform详解

==transform==字面上就是变形，改变的意思。在css3中transform主要包括以下几种： 旋转rotate 、 扭曲skew 、 缩放scale 和 移动translate 以及 矩阵变形matrix 。

none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

1.1 translate(x,y):单位可以是px

1.2单位也可以是百分比，参照物是元素本身

1.3 参数可以是(x,y),x,y轴都位移

1.4 参数(x),设置x轴上得位移

translate([ x,y ]) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):

[图片上传失败...(image-154e3b-1620550857918)]

2、translateX() ： 通过给定一个X方向上的数目指定一个translate。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px):

[图片上传失败...(image-80f009-1620550857918)]

3、translateY() ：通过给定Y方向的数目指定一个translate。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。如：transform:translateY(20px):

[图片上传失败...(image-2ffdd9-1620550857918)]

[图片上传失败...(image-af90fa-1620550857918)]

rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

[图片上传失败...(image-a2befa-1620550857918)]

skew( [, ]) ：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg):

[图片上传失败...(image-c4b307-1620550857918)]

skewX() ： 按给定的角度沿X轴指定一个skew transformation（斜切变换）。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)

[图片上传失败...(image-e96057-1620550857918)]

skewY() ： 按给定的角度沿Y轴指定一个skew transformation（斜切变换）。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）

[图片上传失败...(image-84cb03-1620550857918)]

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):

[图片上传失败...(image-fd2209-1620550857918)]

scaleX() ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如：transform:scaleX(2):

[图片上传失败...(image-be2d37-1620550857918)]

scaleY() ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform-origin来改变元素的基点。如transform:scaleY(2):

[图片上传失败...(image-6c61d2-1620550857918)]

[图片上传失败...(image-374ac1-1620550857918)]

matrix(, , , , , ) ： 以一个含六值的(a,b,c,d,e,f) 变换矩阵 的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果有感兴趣的朋友可以去了解更深层次的martix使用方法，这里就不多说了。

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):

[图片上传失败...(image-ed7125-1620550857918)]

(2)transform-origin:right

[图片上传失败...(image-6bf39b-1620550857918)]

(3)transform-origin(25%,75%)

[图片上传失败...(image-cfef52-1620550857918)]

//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浏览器

[图片上传失败...(image-66003f-1620550857918)]

同样的transform在IE9下版本是无法兼容的，之所以有好多朋友说，IE用不了，搞这个做什么？个人认为，CSS3推出来了，他是一门相对前沿的技术，做为Web前端的开发者或者爱好者都有必要了解和掌握的一门新技术，如果要等到所有浏览器兼容，那我们只能对css3说NO，我用不你。因为IE老大是跟不上了，，，，纯属个人观点，不代表任何。还是那句话，感兴趣的朋友跟我一样，不去理会IE，我们继续看下去。

css3 transition和transform的应用

一、首先学习的是transition属性（zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换）

transition 过渡 作为一个复合属性

1.transition-property 指定可以过渡的属性

默认值是all 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

2.transition-duration 指过渡完成的时间

默认值为0s

3.transition-timing-function 过渡的动画类型

默认值为ease

ease 规定慢速开始，然后变快，之后慢速结束的过渡效果

ease-in 规定以慢速开始的过渡效果

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

linear 规定以相同速度开始至结束的过渡效果

cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值

4.transition-delay 延迟执行过渡的时间

默认值为0s

二、transform属性

transform 向元素应用2D或3D转换 只对block级元素生效

1.translate 位移

translateX() 在x轴上发生位移或者变形

translateY() 在y轴上发生位移或者变形

translate(x,y) 在x轴 ，y轴上发生位移或者变形 当只有一个值的时候，只有x轴生效

2.scale 缩放

scaleX() 设置在x轴上发生缩放

scaleY() 设置在y轴上发生缩放

scale(x,y) 设置在x轴，y轴上发生缩放 当只有一个值的时候，x，y轴都发生缩放可以设置负数 使用场景：设置小于12px的字体

3.rotate 旋转 2d旋转 设置元素在2d平面旋转（z轴），正数按顺时针，负数按逆时针

rotateX（）设置沿x轴旋转

rotateY () 设置沿y轴旋转

4.skew 倾斜

skewX 绕x轴发生倾斜

skewY 绕y轴发生倾斜

skew(x,y) 绕x,y轴发生的倾斜 x轴和y轴和我们理解的相反，常用于平行四边形图案

三、transform-origin: 设置旋转元素的基点位置

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。

下面我们主要来看看其使用规则：

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。

语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;

top left | left top 等价于 0 0；

top | top center | center top 等价于 50% 0

right top | top right 等价于 100% 0

left | left center | center left 等价于 0 50%

center | center center 等价于 50% 50%（默认值）

right | right center | center right 等价于 100% 50%

bottom left | left bottom 等价于 0 100%

bottom | bottom center | center bottom 等价于 50% 100%

bottom right | right bottom 等价于 100% 100%

css3中的transform、transition、translate、animation

transform：属性应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)、倾斜,扭曲(skew)，设置基点位置transform-origin:50% top;

?rotate:? ? ? ? ?是transform的值，定义2D或3D的旋转，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

? ? ? ? ? ? ? ? ? ? ?2D：rotate( angle )定义 2D 旋转，在参数中规定角度。

? ? ? ? ? ? ? ? ? ? ?3D：rotate3d( x , y , z , angle )定义 3D 旋转。

? ? ? ? ? ? ? ? ? ? ?事例：2D:transform: rotate(45deg);3D:ransform: rotate3d(0,0,0,45deg)

scale:? ? ? ? ? ?是transform的值，定义 2D 或3D缩放，表示对当前元素的缩放。

? ? ? ? ? ? ? ? ? ? 2D：scale(x,y)定义 2D 缩放，对当前元素的宽度是原始大小的x倍，高度是原始大小的y倍。

? ? ? ? ? ? ? ? ? ? 3D：scale3d( x , y , z )定义 3D 缩放，对当前元素在x轴，y轴，z轴的缩放。

? ? ? ? ? ? ? ? ? ? 事例：2D:scale: scale(2,3);3D:ransform:?scale3d(0,0,1)

translate? ：是transform的值，定义 2D 或3D转换，表示对当前元素的位移。

? ? ? ? ? ? ? ? ? ? 2D：translate( x , y )定义 2D 转换，沿着 X 和 Y 轴移动元素。

? ? ? ? ? ? ? ? ? ?3D：translate3d( x , y , z )定义 3D 转化。

? ? ? ? ? ? ? ? ? ?事例：2D:transform: translate(50px,100px);3D:ransform: translate3d(50px,100px,50px)

skew：? ? ? ?是transform的值，定义倾斜，表示对当前元素的倾斜角度。

? ? ? ? ? ? ? ? ? ?skew( x-angle , y-angle )定义 2D 倾斜，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

? ? ? ? ? ? ? ? ? ?事例：transform: skew(1deg,2deg)

transition属性：允许CSS属性值在一定的时间区间内平滑的过渡，只能设置 初始值和结束值，需要事件的触发，例如单击、获取焦点、失去焦点等

? ? ? ? ? ? ? ? ? ? ? ? transition : transition-property ? transition-duration ? transition-timing-function ? transition-delay ;

? ? ? ? ? ? ? ? ? ? ? ? transition-property :规定应用过渡的 CSS 属性的名称。

? ? ? ? ? ? ? ? ? ? ? transition-duration :定义过渡效果花费的时间。默认是 0。

? ? ? ? ? ? ? ? ? ? ? transition-timing-function :规定过渡效果的时间曲线。默认是 "ease"。

? ? ? ? ? ? ? ? ? ? ? transition-delay :规定过渡效果延迟的时间。默认是 0。

? ? ? ? ? ? ? ? ? ? ? 事例：? transition :?width 2s ease-in-out? 1s

animation属性：通过帧动画对当前元素的某些属性进行帧动画的播放，功能相似于transition，但更加的精确、可以控制到每一帧，高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前? ? ? ? ? ? ? ? ? ? ? ? ? ? 状态等，请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

? ? ? @keyframes fadeIn {

? ? ? ? ? ? ? ? ? ? 0% {opacity:0; }

? ? ? ? ? ? ? ? ? 100% {opacity:1;}

? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ? ? ? 事例：animation:fadeIn?5s infinite;（fadeIn是帧动画的名称）infinite 无限循环

@keyframes fadeIn {

0% {opacity:0;}

100% {opacity:1;}

}

@keyframes fadeout {

0% {opacity:1;}

100% {opacity:0;}

}

@keyframes pendulu?{

from {transform:rotate3d(0,0,1,0);}

5.5% {transform:rotate3d(0,0,1,-11deg);}

7% {transform:rotate3d(0,0,1,-12deg);}

16% {transform:rotate3d(0,0,1,9deg);}

17.5% {transform:rotate3d(0,0,1,10deg);}

26.5% {transform:rotate3d(0,0,1,-7deg);}

28% {transform:rotate3d(0,0,1,-8deg);}

36.5% {transform:rotate3d(0,0,1,5deg);}

38% {transform:rotate3d(0,0,1,6deg);}

46.5% {transform:rotate3d(0,0,1,-4deg);}

48% {transform:rotate3d(0,0,1,-5deg);}

57% {transform:rotate3d(0,0,1,3deg);}

58.5% {transform:rotate3d(0,0,1,4deg);}

66.5% {transform:rotate3d(0,0,1,-2deg);}

68% {transform:rotate3d(0,0,1,-3deg);}

75% {transform:rotate3d(0,0,1,1.5deg);}

76.5% {transform:rotate3d(0,0,1,2.5deg);}

82.5% {transform:rotate3d(0,0,1,-1deg);}

84% {transform:rotate3d(0,0,1,-2deg);}

90% {transform:rotate3d(0,0,1,1.5deg);}

95% {transform:rotate3d(0,0,1,-1deg);}

to {transform:rotate3d(0,0,1,0);}

}

@keyframes scale {

0% {transform:scale(0.9);}

100% {transform:scale(1);}

}

@keyframes cloud {

0% {transform:translateX(0);}

25% {transform:translateX(30%);}

50% {transform:translateX(60%);}

75% {transform:translateX(30%);}

100% {transform:translateX(0);}

}

@keyframes? fadeInDown

{

0%?{

? ? opacity:?0;

? ? filter:?alpha(opacity=0);

? ? -webkit-transform:?translate3d(0, -100%, 0);

? ? transform:?translate3d(0, -100%, 0);

}

100%?{

? ? opacity:?1;

? ? filter:?alpha(opacity=100);

? ? -webkit-transform:?none;

? ? /* transform:?none; */

}}

@-webkit-keyframes bounceIn {

0%,20%,40%,60%,80%,100% {

-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);

transition-timing-function:cubic-bezier(.215,.61,.355,1)

}

0% {

opacity:0;

filter:alpha(opacity=0);

-webkit-transform:scale3d(2,2,2);

transform:scale3d(2,2,2)

}

40% {

-webkit-transform:scale3d(.9,.9,.9);

transform:scale3d(.9,.9,.9)

}

60% {

-webkit-transform:scale3d(1.03,1.03,1.03);

transform:scale3d(1.03,1.03,1.03)

}

80% {

opacity:1;

filter:alpha(opacity=100);

-webkit-transform:scale3d(.97,.97,.97);

transform:scale3d(.97,.97,.97)

}

100% {

-webkit-transform:scale3d(1,1,1);

transform:scale3d(1,1,1)

}

}

.rotate2d {

-webkit-animation-timing-function:linear;

animation-timing-function:linear;

-webkit-animation-name:rotate2d;

animation-name:rotate2d

}

.box-bottle {

position:absolute;

left:70%;

width:pr(99);

height:pr(97);

background:url("#{$imgPath}btn-bottle.png")no-repeat;

background-size:100%;

transform-origin:35% 68%;

opacity:0;

z-index:10;

div {

position:absolute;

width:pr(18);

height:pr(35);

transform:translate3d(-150%,-20%,0)rotate3d(0,0,1,100deg);

transition:opacity .5s linear 1.5s;

}

i {

position:absolute;

width:pr(18);

height:pr(35);

background-repeat:no-repeat;

background-size:100%;

transform-origin:3000% 50%;

opacity:0;

:nth-child(1) {

transition:transform 1s ease-out 1s,opacity .2s linear .9s;

background-image:url("#{$imgPath}water1.png");

}

:nth-child(2) {

transition:transform 1.1s ease-out .9s,opacity .2s linear .8s;

background-image:url("#{$imgPath}water2.png");

}

:nth-child(3) {

transition:transform 1.2s ease-out .8s,opacity .2s linear .7s;

background-image:url("#{$imgPath}water3.png");

}

:nth-child(4) {

transition:transform 1.3s ease-out .7s,opacity .2s linear .6s;

background-image:url("#{$imgPath}water4.png");

}

:nth-child(5) {

transition:transform 1.4s ease-out .6s,opacity .2s linear .5s;

background-image:url("#{$imgPath}water5.png");

}

:nth-child(6) {

transition:transform 1.5s ease-out .5s,opacity .2s linear .4s;

background-image:url("#{$imgPath}water6.png");

}

}

.active {

opacity:1;

animation:pour 2.5s both;

div {

opacity:0;

}

i {

opacity:1;

:nth-child(1) {

transform:rotate3d(0,0,1,-25deg);

}

:nth-child(2) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,50%,0);

}

:nth-child(3) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,0,0);

}

:nth-child(4) {

transform:rotate3d(0,0,1,-25deg)translate3d(0,150%,0);

}

:nth-child(5) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,200%,0);

}

:nth-child(6) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,150%,0);

}

}

}

}