transform在CSS中的含义是什么

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

本教程操作环境: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表示一个或多个变换函数,以空格隔开

transform在CSS中的含义是什么

一、旋转 rotate

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

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

transform: rotate(45deg);  //顺时针旋转30度

transform在CSS中的含义是什么

注意:旋转的时候默认以元素中心点为基点进行旋转,可以通过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);

transform在CSS中的含义是什么

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

不常用

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

transform: rotateX(45deg);

transform在CSS中的含义是什么

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

transform:rotateY(45deg);

transform在CSS中的含义是什么

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

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

transform:rotateZ(45deg);

transform在CSS中的含义是什么

二、移动 translate

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

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

例如:

transform:translate(50px,50px):

transform在CSS中的含义是什么

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

例如:

transform:translateX(50px):

transform在CSS中的含义是什么

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

例如:

transform:translateY(50px):

transform在CSS中的含义是什么

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

transform在CSS中的含义是什么

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

transform-origin: 100% 100%;transform: scale(0.7, 0.3);

transform在CSS中的含义是什么

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

transform: scaleX(0.7)

transform在CSS中的含义是什么

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

transform: scaleY(0.7)

transform在CSS中的含义是什么

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

transform在CSS中的含义是什么

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

transform-origin: 100% 100%;transform: skew(10deg,10deg);

transform在CSS中的含义是什么

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

transform: skewX(10deg);

transform在CSS中的含义是什么

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

transform: skewY(10deg);

transform在CSS中的含义是什么

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

transform-style: preserve-3d;

到此,相信大家对“transform在CSS中的含义什么”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

文章标题:transform在CSS中的含义是什么,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/28851

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年9月22日 下午10:08
下一篇 2022年9月22日 下午10:09

相关推荐

  • MyBatisPlus QueryWrapper多条件查询及修改方法是什么

    gt、ge、lt、le、isNull、isNotNull 大于 > 例: gt(“age”, 18) → age > 18 ge 大于等于 >= 例: ge(“age”, 18) → age &gt…

    2022年9月21日
    33100
  • Redis实现限流器的方法有哪些

    方法一:基于Redis的setnx的操作 我们在使用Redis的分布式锁的时候,大家都知道是依靠了setnx的指令,在CAS(Compare and swap)的操作的时候,同时给指定的key设置了过期实践(expire),我们在限流的主要目的就是为了在单位时间内,有且仅有N数量的请求能够访问我的代…

    2022年9月10日
    8000
  • windows KB4525237安装失败怎么解决

    根据情况不同,小编为大家准备了四种解决方案 第一种方案: 重新下载安装补丁 在我们下载补丁的过程中可能就会遇到文件损坏的情况,所以破损的补丁安装包是无法安装成功的。 这种情况下可以尝试重新下载一个补丁安装包重新安装。 第二种方案: 更新升级最新的.net framework(目前是4.8版本) 第三…

    2022年9月1日
    5700
  • windows默认网关不可用怎么修复

    修复方法: 第一步:右击windows,选择设备管理器。 第二步:点击系统设置,找到intel(R)management右击,双击属性。 第三步:点击电源管理,将节约电源(A)取消勾选。 第四步:打开网络管理中心,选择更改适配器选项。 第五步:右击以太网,点击属性。 第六步:选择协议版本4,双击。 …

    2022年9月21日
    3200
  • mysql如何修改存储引擎为innodb

    两种修改方法:1、使用SET语句临时修改默认存储引擎,语法为“SET default_storage_engine=innodb;”,当重启客户端后就会恢复为原引擎类型。2、使用ALTER TABLE语句修改,语法“ALTER TABLE 表名 ENGINE=innodb;”,可以修改指定表的引擎类…

    2022年9月21日
    7000
  • jquery如何改变input的value属性

    在jquery中,可以利用val()方法来改变input的value属性;val()方法用于返回或者设置被选元素的value属性,value属性用于规定input元素的值,语法为“$(input元素对象).val(input修改后的value属性值);”。 本文操作环境:windows10系统、jq…

    2022年9月10日
    11800
  • windows驱动精灵intel芯片组驱动安装失败如何解决

    解决方法: 1、驱动程序安装顺序不对,首选需要用工具卸载默认的安装驱动,再重新安装正确的驱动。 建议使用鲁大师等软件。 2、根据安装的提示,应该先加载驱动程序,在继续安装系统。 3、什么样式的芯片组就需要用什么样的驱动,Intel芯片的接口是不能使用amd驱动的。 以上就是“windows驱动精灵i…

    2022年9月13日
    35700
  • 怎么分析Facebook Ads广告业务API接口的源代码泄露漏洞

    发现漏洞 一个多月后,我就发现了存在Facebook Ads广告业务系统API中的一个漏洞。存在漏洞的API是一个图片处理接口,它用于Facebook商户账户上传广告图片,上传的图片会储存在一个名为“/adimages”的目录下,并用base64格式编码。所以,我的测试构想是,在这里的机制中,可以向…

    2022年9月19日
    5500
  • ECharts如何打印数据

    ECharts打印数据的方法 一、 首先我们要做的,就是在Echarts图标上方定义一个img 1 <!–startprint–>2 <img src=”” id=”printImg” style=&#8221…

    2022年9月26日
    6900
  • 如何实现APT34泄密武器报告分析

    APT34是一个来自于伊朗的APT组织,自2014年起,持续对中东及亚洲等地区发起APT攻击,涉猎行业主要包含政府、金融、能源、电信等。多年来,攻击武器库不断升级,攻击手法也不断推陈出新,并且攻击行为不会因为被曝光而终止。 APT34组织背景 4月17日,有国外媒体报道,一个名为“Lab Dookh…

    2022年9月8日
    9400
联系我们
关注微信
关注微信
分享本页
返回顶部
PingCode 比 Jira 更好用的研发管理工具。免费试用