transform是什么意思？用法、例句 Transform（CSS动态属性的开始）

本篇文章给大家谈谈transform是什么意思？用法、例句，以及Transform（CSS动态属性的开始）对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

基本概念：transform属性向元素应用2D或3D转换；该属性允许我们对元素进行旋转、缩放、移动或倾斜。

这两点是Transform的概念和应用场景，重点在于2D和3D的转换，那么呢？2D和3D的转换是有一定的数学基础的，为什么这么说呢？我们需要了解两个概念

第一个：透视投影

从某一点发射出去的光线，是互不平行的，然后就会有一个近大远小的效果。比如：家里的灯泡，我们把一个东西离得灯泡越近，那么它的影子就越大，离得越远，影子就越小。

与之对应的：正交投影

正交投影的投影线垂直于投影平面，里面的光线是互相平行的；比如生活中的太阳发出的光都是平行光。

CSS的坐标系统：它的坐标系是一个左手坐标系，绿色的是x轴的方向也就是屏幕的方向，向右正方向；红色的是y轴，向下是正方向；蓝色是z轴，屏幕向外是正方向。（如下图所示）

CSS变换都是基于左手坐标系和透视投影。

常用属性主要有：Transform-origin（基准点），基于哪一个点来做变换，Transform-style（元素呈现方式2D还是3D），Rotate（旋转-度数），Scale（缩放-大小），Skew（倾斜-左右），Translate（移动-x/y轴），Perspective（透视）。

transform:rotate(45deg);\nrotateX(angle)，沿X轴3D旋转

transform:rotate(45deg);\nrotateY(angle)，沿Y轴3D旋转

transform:rotate(45deg);\nrotateZ(angle)，沿Z轴3D旋转

transform:rotate(45deg);\nrotate3d(x,y,z,angle)，3D旋转；接收四个参数，xyz介于0-1之间，确定三维空间唯一坐标点，angle围绕原点与xyz坐标点连线的旋转角度。元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是rotate3D。

transform:rotate3d(1,1,1,45deg);\n4、Scale（缩放，同样分为2D缩放和3D缩放）scale(x[,y])，2D缩放

transform:scale(2);\nscaleX(x)，沿X轴缩放

transform:scaleX(2);\nscaleY(y)，沿Y轴缩放

transform:scaleY(2);\nscaleZ(z)，沿Z轴缩放-单独使用时没有任何效果

transform:scaleZ(2);\nscale3d(x,y,z)，定义每个方向上的缩放，Z方向单独使用时没有任何效果

transform:scale(2,2,2);\n5、Skew（倾斜）skewX(angle)-沿X轴的2D倾斜

transform:skewX(45deg);\nskewY(angle)-沿Y轴的2D倾斜

transform:skewY(45deg);\nskew(angle-x,angle-y)-沿XY轴的2D倾斜

transform:skewY(45deg,45deg);\n6、Translate（移动）translateX(x)，沿X轴位移

transform:translateX(20px);\ntranslateY(y)，沿Y轴位移

transform:translateY(20px);\ntranslateZ(z)，沿Z轴位移，需要配合perspective属性一起使用

transform:translateZ(20px);\ntranslate(x,y)，沿XY轴位移

transform:translate(20px,20px);\ntranslate3d(x,y,z)，沿XYZ轴位移

transform:translate(20px,20px,20px);\n7、Perspective，定义的是视觉和元素在3D空间Z平面之间的距离

transform:perspective(200px);\n8、Transform-origin（基准点）

在前面的例子里，旋转和倾斜都是基于中心位置，也就是基准点的默认值：50%50%0；Transform-origin接收三个参数，x-axisy-axisz-axis；

在x的方向上可以指定：left、center、right、length和%；在y轴的方向上可以指定：top、center、bottom、length和%；在y轴的方向上只可以指定：length。

transform-origin:x-axisy-axisz-axis;\n9、Transform-style（三维空间的展现形式）

主要有两个值：float-2D形式和preserve-3d-3D形式。

本篇文章主要分享了Transform的基本概念，简要介绍了CSS3坐标系统与透视原理,重点介绍了Transform常用的Rotate(旋转)、Scale(缩放)、Skew(倾斜)、Translate(移动)、Perspective(透视)属性。

文章分享结束，transform是什么意思？用法、例句和Transform（CSS动态属性的开始）的答案你都知道了吗？欢迎再次光临本站哦！