css3transform(css的translate属性)-易模板

这篇文章给大家聊聊关于css3transform，以及css的translate属性对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

在网页设计中，动效一直是吸引眼球、提升用户体验的重要手段。而CSS3 Transform作为一项强大的技术，能够帮助我们轻松实现各种炫酷的动效效果。今天，就让我们一起揭开CSS3 Transform的神秘面纱，探索它如何成为网页动效的秘密武器。

一、CSS3 Transform简介

CSS3 Transform是CSS3中的一项重要特性，它允许我们通过一系列的变换函数来改变元素的位置、形状、大小等。这些变换函数包括平移（translate）、缩放（scale）、旋转（rotate）、倾斜（skew）等。通过合理运用这些变换函数，我们可以为网页元素赋予丰富的动效表现。

二、CSS3 Transform的应用场景

1. 导航菜单

在网页的导航菜单中，使用CSS3 Transform可以实现点击菜单项时，菜单项的背景颜色、位置等发生动态变化的效果。

2. 轮播图

轮播图是网页中常见的元素，使用CSS3 Transform可以实现轮播图元素的平滑切换效果，提升用户体验。

3. 按钮效果

为按钮添加CSS3 Transform动效，可以使按钮在鼠标悬停时产生立体感，增强视觉效果。

4. 图片展示

在图片展示页面，使用CSS3 Transform可以实现图片的放大、缩小、旋转等效果，让用户有更好的视觉体验。

5. 卡片布局

在卡片布局中，使用CSS3 Transform可以实现卡片之间的切换效果，使页面更具动感。

三、CSS3 Transform的基本语法

CSS3 Transform的基本语法如下：

“`css

transform: function(value);

“`

其中，`function`表示变换函数，`value`表示变换的参数。

以下是常用的变换函数及其参数：

变换函数	参数说明
translate	平移距离，如：translate(10px,20px)
scale	缩放比例，如：scale(1.5)
rotate	旋转角度，如：rotate(45deg)
skew	倾斜角度，如：skew(30deg,30deg)

四、CSS3 Transform的兼容性

CSS3 Transform在各大浏览器的兼容性较好，但在部分老旧浏览器中可能存在兼容性问题。以下是一些常见的兼容性解决方案：

浏览器	兼容性解决方案
IE9+	使用`-ms-transform`
Firefox	使用`-moz-transform`
Chrome	使用`-webkit-transform`
Opera	使用`-o-transform`

五、CSS3 Transform的实战案例

以下是一个使用CSS3 Transform实现导航菜单切换效果的案例：

“`html

CSS3 transform是什么？

transform的含义是：改变，使…变形；转换

CSS3 transform都有哪些常用属性？

transform的属性包括：rotate()/ skew()/ scale()/ translate(,)，分别还有x、y之分，比如：rotatex()和 rotatey()，以此类推。

下面我们来分解各个属性的用法：

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew()：

含义：倾斜；

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

transform综合：

transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例：

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}

.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0)translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)sca

css3系列之transform 详解rotate

rotate

　　rotateX

　　rotateY

　　 rotateZ

　　rotate3d

rotate：

旋转该元素，配合着transform-origin属性，transform-origin是设置旋转点的。(没有设置transform-origin属性也可以，只不过是根据该元素的中心点旋转，也就是center center)

加上 transform-origin设置旋转点。transform-origin是根据自己而定位的，所以 0px 0px就是左上角那个点。

rotateX：

讲这个之前呢，先普及一个知识，在transform里面，x y z轴，分别是什么样子的，他跟我们平常的 x和 y不太一样，因为，他是倒着的。 Z轴呢，在0那个位置，因为他是3D的，看下面的图，转个身就知道在那里了。

接下来，看看所谓的Z轴是什么

rotateX的X呢，可以写成大写的，也可以写成小写的x，没有影响，这个属性呢，你加上rotateX之后，这个元素，就会以 X轴旋转，里面填的是角度。

这样看起来，好像不是那么直观，毕竟是2D的图，来给他加了3D的效果看看，(由于设置了 transform-origin：0 0，所以并不会在元素的中间旋转，而是以 0 0点的那条x轴旋转)

上面两个图，第一个图是在 2d的情况下观看的，第二个图是 3d的时候，是不是 3d看起来比较直观。

那么，接下来，加上Y一起使用，rotateX(45deg) rotateY(45deg)，这两个合在一起什么意思呢，这个元素，先按照 X轴，旋转45度，然后再按照Y轴，旋转45度，那么接下来的结果会是怎么样呢？

由于我设置的 transform-origin：center center；定的点在中心，那么两条轴，是会成这样子的。

然后，看下，结果，是不是如我们所示？

最后，加上rotateZ

rotate3D：

设置一条主轴，然后根据这条轴旋转

这个呢，可以设置4个参数，前三个是，x y z最后一个是角度deg但是，此 x y z，可不是上面那几个，不一样的。这三个值，设置的是矢量的方向，填什么无所谓，主要是比值很重要。举个例子 1，1，0，0deg那么就是 1：1：0= 100：100：0对吧，拿这个值来图解比较好。

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

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

支持transform浏览器

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

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

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！

文章版权归作者所有，未经允许请勿转载。

THE END

SEO网站优化