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

相关推荐

  • 数据库加密有什么用

    数据库加密的主要用途包括:保护数据的安全性、防止未经授权的访问、满足法规要求、防止数据泄露、保证数据的完整性和可靠性。数据库加密是一种安全策略,它可以确保存储在数据库中的敏感信息不被未经授权的用户访问。如果没有正确的密钥,即使数据被盗,也无法解读加密的信息,从而极大地增强了数据的安全性。此外,数据库…

    2024年7月16日
    700
  • 数据库跳板是什么意思

    数据库跳板是一种在网络安全领域常见的术语,是指黑客通过某个已经被控制的数据库,跳转到其他的数据库或系统,以此进行进一步的攻击行为。具体来说,数据库跳板包括以下几个步骤:一、黑客首先找到一个安全漏洞较多、比较容易攻击的数据库,然后利用各种手段将其控制;二、控制后,黑客会在此数据库中植入恶意代码,使其成…

    2024年7月16日
    500
  • 数据库实现了些什么功能

    数据库实现了数据存储、数据检索、数据管理、数据完整性、数据安全、并发控制、备份与恢复等功能。在这些功能中,数据存储是最基础的功能,因为所有的数据操作都依赖于数据存储这一核心功能。数据存储确保了数据的持久化,能够在需要时进行读取和操作,而不会因为系统关闭或故障而丢失数据。数据库系统通过高效的数据存储机…

    2024年7月16日
    300
  • 电信数据库都做些什么工作

    电信数据库的主要工作包括数据存储、数据管理、数据分析、数据安全、数据备份和恢复、数据集成和数据挖掘。数据存储是其核心功能之一,确保大量用户信息、通话记录、账单数据等能够高效、安全地存储。数据管理涉及对这些数据的组织和维护,确保数据的准确性和一致性。数据分析则通过大数据技术对存储的信息进行深度挖掘,帮…

    2024年7月16日
    400
  • 启动数据库用什么软件好

    启动数据库,我们可以选择多种不同的软件,比如MySQL、Oracle、SQL Server、PostgreSQL、MongoDB、SQLite等。每种数据库软件都有其独特的特性和适应的应用场景。例如,MySQL是最受欢迎的关系数据库管理系统,它具有开源、性能高效、成本低、可扩展性好等优点,被广泛应用…

    2024年7月16日
    300
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部