前端笔记24-transform变形属性及案例[1个月学习HTML&CSS-2022年11月] 笔记24-transform变形属性及案例 变形属性：transform的所有属性值 1、transform：none;默认值，不进行转换变形 2、transform：translate（）；移动 平移 单位是px 3、transform：rotate（）；旋转 单位是deg deg度数 4、transform：scale（）；缩放 没有单位 默认值是1 5、transform：skew（）；倾斜 单位是deg 6、设置在父级transform：perspective（）；景深 视距 单位是px 设置在子级perspective:1200px; 2d场景，在屏幕上水平和垂直的交叉线x轴和y轴 3d场景，在垂直于屏幕的方法，相对于3d多出个z轴。z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向 一、位移 CSS中 Transform转换 属性个数属性说明1transform ：none；定义不进行转换。transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父素的2transform ：translateX(200px)；根据X轴给定的参数，从当前素位置移动。3transform ：translateY(200px)；根据Y轴给定的参数，从当前素位置移动。4transform ：translate(10px,20px)；简写：定义 2D 平移移动。 二、缩放 CSS中 Transform转换 属性个数属性说明transform ：scale(2)；缩放 默认是X和Y同时缩放 默认值是11transform ：scaleX(2)；通过设置 X 轴的值来定义缩放转换2transform ：scaleY(3)；通过设置 Y 轴的值来定义缩放转换。4transform ：scale(2,2)；简写：定义 2D 缩放 相等的时候可以设置一个参数 transform: scale(2) /* 参数表示倍数，表示2个值相同 */ /* 关于缩放参数的取值问题 1.大于1的表示放大倍数 2.等于1的表示不变化(显示) 3.小于1的表示缩小倍数 4.等于0的表示隐藏 */ 三、旋转与斜切 旋转：参数是角度值 不可以填多个参数CSS中 Transform转换 属性个数属性说明transform ：rotate(30deg)；旋转 单位deg 默认是Z轴旋转1transform ：rotateX(30deg)；根据X轴给定的参数，从当前素位置旋转。2transform ：rotateY(30deg)；根据Y轴给定的参数，从当前素位置旋转。3transform ：rotate(一个参数)；同rotateZ() 默认不设置方向的时候就是Z轴默认等同于Z轴，正数顺时针、负数逆时针CSS中 Transform转换 属性个数属性transform ：skew(30deg)；倾斜 单位deg1transform ：skewX(30deg)；通过设置 X 轴的值来定义倾斜转换2transform ：skewY(30deg)；通过设置Y 轴的值来定义倾斜转换3transform ：skew(30deg,130deg)；定义2D倾斜4注意点：倾斜没有Z轴的写法 四、改变素基点的位置transform-origin 改变素基点的位置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轴的设置，只能是数值。 五、3D变换 <!– transform-style指定嵌套素如何在3D空间中呈现 transform-style:flat; flat值为默认值，表示所有子素在2D平面呈现 transform-style:preserve-3d; preserve-3d表示所有子素在3D空间中呈现。 注意：transform-style属性需要设置在父素中，并且高于任何嵌套的变形素 1.让浏览器形成3D空间(父级素上设置) - 属性:transform-style - 属性值:flat(默认为2D空间)/preserve-3d(形成3d空间) - 注意:当容器形成3d空间之后只是多了一条Z轴可以取设置,当前空间并不会变形 2.3D中的位移使用 - translateZ() - translate3d(x,y,z) 3.3D中的缩放属性 - scaleZ() 单独使用没有变化 - scale3d(x,y,z) 4.3D中的旋转属性 - rotateZ() 默认不设置方向的时候就是Z轴 - rotate3d(x,y,z,角度值) 表示前面三个轴向都是开关，设为1/0 5.倾斜没有Z轴操作 –> backface-visibility属性 backface-visibility属性决定素旋转背面是否可见。对于未旋转的素，该素的正面面向观看者。当其Y轴旋转约180度时会导致素的背面面对观众。 语法：backface-visibility: visible | hidden visible：为backface-visibility的默认值，表示反面可见 hidden：表示反面不可见
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/45618.html
