transform属性，Content属性

编程之家2026-06-21876次浏览

本篇文章给大家谈谈transform属性，以及Content属性对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

transform有哪些属性

transform的属性主要包括：translate、rotate、scale和 skew。

1. translatetranslate是 transform中的一个重要属性，用于实现元素在水平方向（translateX）和垂直方向（translateY）上的位移。

translateX：通过设置具体的数值，可以将元素在水平方向上移动到指定的位置。正值表示向右移动，负值表示向左移动。translateY：通过设置具体的数值，可以将元素在垂直方向上移动到指定的位置。正值表示向下移动，负值表示向上移动。translate：可以同时设置水平和垂直方向上的位移，格式为 translate(tx, ty)，其中 tx和 ty分别表示水平和垂直方向上的位移量。translate属性的使用为页面布局带来了更多的灵活性，可以方便地调整元素的位置，实现各种布局效果。

2. rotaterotate属性可以使元素按照指定的角度进行旋转。无论是顺时针（正值）还是逆时针（负值）旋转，都能通过准确的角度值来控制。

基本用法：rotate(angle)，其中 angle表示旋转的角度，单位为度（deg）。正值表示顺时针旋转，负值表示逆时针旋转。rotate属性的使用为元素增添了动态效果，可以用于制作各种旋转动画和交互效果。

3. scalescale属性能够实现元素的缩放。可以分别在水平方向（scaleX）和垂直方向（scaleY）上进行缩放，或者同时在两个方向上进行等比例缩放（scale）。

scaleX：通过设置具体的数值，可以对元素在水平方向上进行缩放。数值大于 1表示放大，数值小于 1表示缩小。scaleY：通过设置具体的数值，可以对元素在垂直方向上进行缩放。数值大于 1表示放大，数值小于 1表示缩小。scale：可以同时设置水平和垂直方向上的缩放比例，格式为 scale(sx, sy)，其中 sx和 sy分别表示水平和垂直方向上的缩放比例。如果只设置一个值，则表示在两个方向上进行等比例缩放。scale属性的使用可以创造出独特的视觉效果，如放大或缩小元素以突出显示或隐藏细节。

4. skewskew属性能够使元素在水平方向（skewX）和垂直方向（skewY）上发生倾斜。

skewX：通过设置具体的数值，可以使元素在水平方向上发生倾斜。正值表示向右上方倾斜，负值表示向左上方倾斜。skewY：通过设置具体的数值，可以使元素在垂直方向上发生倾斜。正值表示向左上方倾斜，负值表示向右上方倾斜。skew：可以同时设置水平和垂直方向上的倾斜角度，格式为 skew(ax, ay)，其中 ax和 ay分别表示水平和垂直方向上的倾斜角度。skew属性的使用为设计带来了更多的创意可能性，可以用于制作各种倾斜效果，增加页面的层次感和立体感。

综上所述，transform的属性丰富多样，包括 translate、rotate、scale和 skew等。这些属性可以单独使用，也可以组合使用，以实现各种复杂的变换效果。开发者和设计师们可以根据具体的需求，巧妙地组合和运用这些属性，打造出令人眼前一亮的效果。

CSS3的transform属性的用法

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

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，我们继续看下去。

关于本次transform属性和Content属性的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。