登录  /  注册

transform在CSS中是什么意思

青灯夜游
发布: 2022-09-21 17:23:27
原创
5610人浏览过

在css中,transform的意思为改变、变形,主要用于设置元素的形状改变,实现元素的2d或3d转换;该属性可以配合属性值(转换函数)来对将元素进行旋转rotate、扭曲skew、缩放scale、移动translate以及矩阵变形matrix。

transform在CSS中是什么意思

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

Transform字面上就是变形,改变的意思,是css3的新增属性,用来设置元素的形状改变,实现元素的2D或3D转换。

在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

语法:

transform: none|transform-functions;即:transform: rotate | scale | skew | translate |matrix;
登录后复制

其中none表示不变换,transform-functions表示一个或多个变换函数,以空格隔开

1.jpg

一、旋转 rotate

1、rotate(angle):通过指定的角度参数对原元素指定一个2D旋转。

angle是指旋转角度(单位为deg),如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

transform: rotate(45deg);  //顺时针旋转30度
登录后复制

2.png

注意:旋转的时候默认以元素中心点为基点进行旋转,可以通过transform-origin属性定义旋转的基点位置

transform-origin属性:定义旋转的基点。

语法:

transform-origin: x-axis y-axis z-axis;
登录后复制

默认值:

transform-origin: 50% 50% 0;
登录后复制

2D的情况下,默认元素的左上角为0% 0%,例如:绕右下角旋转45度

transform-origin: 100% 100%;transform: rotate(45deg);
登录后复制

3.jpg

2、rotate3d(x, y, z, angle):定义3D旋转

不常用

3、rotateX(angle):定义沿着X轴的3D旋转

transform: rotateX(45deg);
登录后复制

4.png

4、rotateY(angle):定义沿着Y轴的3D旋转

transform:rotateY(45deg);
登录后复制

5.png

5、rotateZ(angle):定义沿着Z轴的3D旋转

由以下的例子可以看出,Z轴的方向是垂直于window的方向

transform:rotateZ(45deg);
登录后复制

6.png

二、移动 translate

1、translate(x, y) :定义2D移动转化

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

例如:

transform:translate(50px,50px):
登录后复制

7.png

2、translate(x):指定X轴方向上的一个移动

例如:

transform:translateX(50px):
登录后复制

8.png

3、translate(y):指定Y轴方向上的一个移动

例如:

transform:translateY(50px):
登录后复制

9.png

4、translate3d(x, y, z):定义3D移动转换

5、translateZ(z):指定Z轴方向上的一个移动

三、缩放 scale

1、scale(x, y):定义2D缩放转换。

X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。例如:

transform: scale(0.7, 0.3);
登录后复制

10.png

可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;例如:

transform-origin: 100% 100%;transform: scale(0.7, 0.3);
登录后复制

11.png

2、scaleX(x):在X轴方向进行缩放转换

transform: scaleX(0.7)
登录后复制

12.png

3、scaleY(y):在Y轴方向进行缩放转换

transform: scaleY(0.7)
登录后复制

13.png

4、scale3d:(x, y, z):定义3D缩放转换

5、scaleZ(z):在Z轴方向进行缩放转换

四、扭曲 skew

1、skew(x-angle, y-angle) :定义沿着 X 和 Y 轴的 2D 倾斜转换。

skew是用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg。:

transform: skew(10deg,10deg);
登录后复制

14.png

同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。例如

transform-origin: 100% 100%;transform: skew(10deg,10deg);
登录后复制

15.png

2、skewX(angle):定义沿着 X 轴的 2D 倾斜转换

transform: skewX(10deg);
登录后复制

16.png

3、skewY(angle):定义沿着 Y轴的 2D 倾斜转换

transform: skewY(10deg);
登录后复制

17.png

注意:如果要实现3D效果,需要将transform-style属性设置为preserve-3d,即

transform-style: preserve-3d;
登录后复制

(学习视频分享:web前端

以上就是transform在CSS中是什么意思的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号