transform在CSS中是什么意思

在CSS中，transform的意思为改变、变形，主要用于设置元素的形状改变，实现元素的2D或3D转换；该属性可以配合属性值（转换函数）来对将元素进行旋转rotate、扭曲skew、缩放scale、移动translate以及矩阵变形matrix。 本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。 Transform字面上就是变形，改变的意思，是 css 3的新增属性，用来设置元素的形状改变，实现元素的2D或3D转换。 在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 语法： 立即学习 “ 前端免费学习笔记（深入） ”； 其中none表示不变换，transform-functions表示一个或多个变换函数，以 空格 隔开 一、旋转 rotate 1、rotate(angle)： 通过指定的角度参数对原元素指定一个2D旋转。 angle是指旋转角度（单位为deg），如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。 注意：旋转的时候默认以元素中心点为基点进行旋转，可以通过transform-origin属性定义旋转的基点位置 transform-origin属性：定义旋转的基点。 语法： 默认值： 2D的情况下，默认元素的左上角为0% 0%，例如：绕右下角旋转45度 2、rotate3d(x, y, z, angle) ：定义3D旋转 不常用 3、rotateX(angle) ：定义沿着X轴的3D旋转 4、rotateY(angle) ：定义沿着Y轴的3D旋转 5、rotateZ(angle) ：定义沿着Z轴的3D旋转 由以下的例子可以看出，Z轴的方向是垂直于window的方向 二、移动 translate 1、translate(x, y) ：定义2D移动转化 x 是第一个过渡值参数，y 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点。 例如： 2、translate(x) ：指定X轴方向上的一个移动 例如： 3、translate(y) ：指定Y轴方向上的一个移动 例如： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 4、translate3d(x, y, z) ：定义3D移动转换 5、translateZ(z) ：指定Z轴方向上的一个移动 三、缩放 scale 1、scale(x, y) ：定义2D缩放转换。 X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。例如： 可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；例如： 2、scaleX(x) ：在X轴方向进行缩放转换 3、scaleY(y )：在Y轴方向进行缩放转换 4、scale3d ：(x, y, z)：定义3D缩放转换 5、scaleZ(z) ：在Z轴方向进行缩放转换 四、扭曲 skew 1、skew(x-angle, y-angle) ：定义沿着 X 和 Y 轴的 2D 倾斜转换。 skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。： 同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。例如 2、skewX(angle) ：定义沿着 X 轴的 2D 倾斜转换 3、skewY(angle) ：定义沿着 Y轴的 2D 倾斜转换 注意 ：如果要实现3D效果，需要将transform-style属性设置为preserve-3d，即 （学习视频分享： web前端 ）