×

css3transform

css3transform(css3transform属性允许我们对元素进行哪些操作)

admin admin 发表于2023-04-12 08:03:09 浏览77 评论0

抢沙发发表评论

本文目录一览:

CSS3中的变形处理

在CSS3中,可以利用 transform 功能来实现文字或图像的旋转、缩放、倾斜和移动着4种类型的变形处理。

在CSS3中,通过 transform 属性来使用 transform 功能。

使用 rotate 方法,在参数中加入角度值,角度值后面跟表示角度单位的 deg 文字即可,旋转方向为顺时针旋转。

运行效果:

使用 scale 方法来实现文字或图像的缩放处理,在参数中指定缩放倍率。

上面的示例使 div 元素缩小了50%。

另外,可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。

上面的示例使 div 元素水平方向缩小了50%,垂直方向放大了一倍。

效果如图:

使用 skew 方法来实现文字或图像的倾斜处理,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

上面的示例使 div 元素水平方向上倾斜了30度,垂直方向上倾斜了30度。

效果如图:

另外, skew 方法中的两个参数可以修改成只使用一个参数,省略另一个参数,这种情况下视为只在水平方向上进行倾斜,垂直方向上不倾斜。

使用 translate 方法来将文字或图像进行移动,在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

上面的示例把 div 元素水平方向上向右移动了 50px ,垂直方向上向上移动了 50px 。

另外, translate 方法中的两个参数可以修改成只使用一个参数,省略另一个参数,这种情况下视为只在水平方向上进行移动,垂直方向上不移动。

示例1:

效果如图:

示例2:

效果如图:

这两个示例都是对同一个页面中同一个元素进行多重变形的示例, 而且各种变形方曲中所使用的参数也都相同,差别只是使用三种变形方法的先后顺序不一样。但,元素在两个页面上所处位置并不相同。说明 transform 参数的顺序不同,结果可能会不一样。-css3transform

在使用 transform 方融进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用 transform-origin 属性,可以改变变形的基准点。

接下来,我们使用 transform-origin 属性把变形的基准点修改为第二个元素的左下角处。

运行效果:

transform-origin 属性的两个参数分别代表:基准点在元素水平方向上的位置,基准点在元素垂直方向上的位置,其中"基准点在元素水平方向上的位置"中可以指定的值为 left 、 center 、 right , "基准点在元素垂直方向上的位置"中可以指定的值为 top 、 center 、 bottom 。-css3transform

12.CSS3的Transform详解

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[图片上传失败...(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):-css3transform

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

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

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

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

[图片上传失败...(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使用方法,这里就不多说了。-css3transform

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设置一样;下面我列出他们相对应的写法:-css3transform

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%;如果只取一个值,表示垂直方向值不变,我们分别来看看以下几个实例-css3transform

(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 ;-css3transform

上面列出是不同浏览内核transform的书写规则,如果需要兼容各浏览器的话,以上写法都需要调用。

支持transform浏览器

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

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

css3中的transform、transition、translate、animation

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

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

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 ;-css3transform

                        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% 是动画的完成。-css3transform

      @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);

}

}

}

}

CSS3的transform属性的用法?

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法

transform: none|transform-functions;

旋转 div 元素:

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-moz-transform:rotate(7deg); /* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg); /* Opera */

}

CSS3 transform 缩放

这是一个缩放的transform属性,y值可以省略,如果y值省略的话,那默认就和x值一样。

举例:

这个例子的执行效果就是,当把指针hover到这个div上的时候,那这个div会放大到原来的1.1倍大。相应的,如果把值改为0.5,hover的时候x和y就会缩小到原来的二分之一。

需要注意的是它的transfom-origin是中心点

只缩放X轴上的倍数。

3、transformY:scale(y);

只缩放Y轴上的倍数。

以上的缩放点都是中心点。

通过CSS3 transform实现图片浏览的几种效果

通过css3和DOM操作,可以实现多种图片浏览的效果 但是大致思路都是一致的:

1)通过DOM操作循环创建出来一组元素

    document.createElement('标签名');

    父级.appendChild('obj');

2)给每一个创建出来的元素添加transform变换效果

    obj.style.transform=' rotateX(30deg)';

    obj.style.transition='1s all ease';

3)当变换结束的时候,瞬间拉回变换并换底图

    obj.addEventListener('transitionend',function(){},false};

    obj.style.transform=' rotateX(0deg)';

    obj.style.transition='none';

  当前要显示的一面:url("img/'+iNow%3+'.jpg");

  即将要显示的一面:url("img/'+(iNow+1)%3+'.jpg");

4)对用户一些影响当前变换的操作进行约束

分散效果重点:

每一个小块的transform:translate('+(aSpan[i].offsetLeft-oBox.offsetWidth/2)+'px,'+(aSpan[i].offsetTop -oBox.offsetHeight/2)+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4);-css3transform

每个小块的transform: aSpan[i].style.transform='perspective(800px) rotateY(-180deg)';

transition: aSpan[i].style.transition='500ms all ease '+(aSpan[i].c+aSpan[i].r)*200+'ms';

第四个参数代表等待运动的时间,故生成依次轮流翻转的效果

document.onmouseover=function(){

当前那个元素的transform:rotateZ(90deg);

};

依次出现的效果:

oBj.style.transform ='rotateY('+i*360/N+'deg) translateZ(300px)';

布局如下:

div id="box"

    div id="page"

        div class="front"/div

        div class="back"/div

    /div

    div id="page2"/div

/div

#page是当前的图片 ,#page2是将要变换的图片,其中#page的front背景图片和#box的背景图片拼成一张当前显示的图片,#page的back背景图片和#page2的背景图片拼成一张即将要换的图片-css3transform