csstransform属性，css属性大全

大家好，今天给各位分享csstransform属性的一些知识，其中也会对css属性大全进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

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

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

HTML怎么设置文字旋转transform属性的旋转技巧

HTML文字旋转主要通过CSS的transform: rotate()属性实现，结合其他属性可优化效果、解决兼容性及布局问题。以下是具体技巧和解决方案：

一、基础旋转设置核心属性：使用transform: rotate(angle)设置旋转角度，例如transform: rotate(45deg);会让文字顺时针旋转45度。代码示例：<style>.rotate-text{ transform: rotate(45deg);}</style><p class="rotate-text">这段文字会被旋转</p>二、关键优化技巧旋转中心点控制

默认旋转中心为元素中心，通过transform-origin修改。例如：transform-origin: top left;/*设置为左上角*/

浏览器兼容性增强

添加浏览器前缀以兼容旧版本：.rotate-text{-webkit-transform: rotate(45deg);/* Safari/Chrome*/-moz-transform: rotate(45deg);/* Firefox*/-ms-transform: rotate(45deg);/* IE 9*/-o-transform: rotate(45deg);/* Opera*/ transform: rotate(45deg);/*标准写法*/}

与其他变换属性结合

结合scale、translate实现复杂效果，例如同时旋转并缩放：transform: rotate(45deg) scale(0.8);

动画效果实现

使用transition或animation创建平滑动画：/*悬停时旋转*/.rotate-text:hover{ transition: transform 0.5s ease; transform: rotate(180deg);}

三、常见问题解决方案文字旋转后出现锯齿

方法1：在父元素添加transform-style: preserve-3d;或backface-visibility: hidden;改善渲染。

方法2：针对WebKit浏览器使用-webkit-font-smoothing: antialiased;开启抗锯齿。

方法3：改用SVG矢量图形，避免锯齿问题。

方法4：微调旋转角度（如从45deg改为44.5deg）减轻锯齿感。

旋转后文字超出容器

调整容器尺寸：根据旋转角度扩大容器宽度/高度。

隐藏溢出内容：使用overflow: hidden;（可能截断文字）。

缩放文字：通过transform: scale(0.9);缩小文字以适应容器。

调整边距：通过padding或margin为旋转留出空间。

绝对定位：精确计算文字位置，例如：.container{ position: relative; width: 200px; height: 200px;}.text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg);}

围绕中心点旋转的动画

步骤1：定义关键帧动画：@keyframes rotate{ from{ transform: translate(-50%,-50%) rotate(0deg);} to{ transform: translate(-50%,-50%) rotate(360deg);}}

步骤2：应用动画并设置旋转中心：<style>.rotate-container{ width: 200px; height: 200px; position: relative;}.rotate-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(0deg); animation: rotate 5s linear infinite; transform-origin: center;}</style><div class="rotate-container"><p class="rotate-text">旋转的文字</p></div>

四、代码复用与维护建议推荐使用CSS类：避免内联样式，便于统一管理和复用。例如：<style>.text-rotate-45{ transform: rotate(45deg);}.text-rotate-90{ transform: rotate(90deg);}</style><p class="text-rotate-45">旋转45度的文字</p>通过以上方法，可灵活实现HTML文字旋转效果，并解决兼容性、锯齿、布局等常见问题。

OK，本文到此结束，希望对大家有所帮助。