CSS2D转换、3D转换的transform知识点有哪些

本文小编为大家详细介绍“CSS2D转换、3D转换的transform知识点有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS2D转换、3D转换的transform知识点有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　2D转换

　　定义：2D变换，是在一个平面对元素进行的操作。

　　可以对元素进行水平或者垂直位移、旋转或者拉伸。

　　确定坐标系

　　默认状态下，x轴是水平的，向右为正。

　　默认状态下，y轴是垂直的，向下为正。

　　变形属性：transform

　　属性值：

　　transform：none;默认值

　　transform：translate（）；移动 平移 单位是px

　　transform：rotate（）；旋转 单位是deg deg度数

　　transform：scale（）；缩放 没有单位 默认值是1

　　transform：skew（）；倾斜 单位是deg

　　transform：matrix（）；矩阵

　　transform：perspective（）；景深 视距 单位是px

　　平移属性

　　transform ：none； 说明：定义不进行转换。

　　transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的

　　transform ：translate(200px)； 默认是按照X轴移动

　　transform ：translateX(200px)； 根据X轴给定的参数，从当前元素位置移动。

　　transform ：translateY(200px)； 根据Y轴给定的参数，从当前元素位置移动。

　　transform ：translate(10px,20px)； 定义 2D 平移移动。

　　旋转属性

　　transform ：rotate(30deg)； 默认是按照Z轴旋转。

　　transform ：rotateX(30deg)；根据X轴给定的参数，从当前元素位置旋转。

　　transform ：rotateY(30deg)； 根据Y轴给定的参数，从当前元素位置旋转。

　　缩放属性

　　transform ：scale(0.2)； 默认是X和Y同时缩放。

　　ransform ：scaleX(2)； 通过设置 X 轴的值来定义缩放转换

　　transform ：scaleY(3)； 通过设置 Y 轴的值来定义缩放转换。

　　transform ：scale(2,5)； 定义 2D 缩放。

　　transform ：scaleX(2) scaleY(3) ；该元素增加或减少的大小，

　　取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。

　　只不过取负值时，会先让元素进行翻转（顺时针180deg），

　　然后在进行缩放。

　　倾斜属性

　　transform ：skew(30deg)； 默认是X轴倾斜。

　　transform ：skewX(30deg)；通过设置 X 轴的值来定义倾斜转换

　　transform ：skewY(30deg)；通过设置 Y 轴的值来定义倾斜转换

　　transform ：skew(30deg,130deg)； 定义 2D 倾斜

　　transform-origin改变元素基点的位置 属性值可加left right.....

　　主要作用：让我们在进行transform动作之前可以改变元素的基点位置。

　　1.transform-origin(X,Y):用来设置元素的运动的基点（参照点）。

　　2.transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。

　　转换基点

　　改变元素基点的位置transform-origin

　　他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。

　　A、transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

　　B、transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。

读到这里，这篇“CSS2D转换、3D转换的transform知识点有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。