当前位置：首页 > news >正文

CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性

news 来源：原创 2025/9/1 13:51:22

1.flex布局

也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力，不会产生浮动布局中脱标现象，布局网页更简单，更灵活。
在这里插入图片描述

属性	描述
display	规定用于 HTML 元素的盒类型。
flex-direction	规定弹性容器内的弹性项目的方向。
justify-content	当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items	当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap	规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content	修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow	flex-direction 和 flex-wrap 的简写属性。
flex	flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。

在这里插入图片描述

CSS 过渡允许在给定的时间内平滑地改变属性值。

如需创建过渡效果，必须明确两件事：

注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

在这里插入图片描述

通过使用 CSS transform 属性，可以利用以下 2D 转换方法：

方法	描述	特点
`translate()`	从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）
`rotate()`	根据给定的角度顺时针或逆时针旋转元素	正值顺时针，负值逆时针
`scale()`	增加或减少元素的大小（根据给定的宽度和高度参数）	可单独写`scaleX()`和`scaleY()`
`skew()`	使元素沿 X 和 Y 轴倾斜给定角度	可单独写`skewX()`和`skewY()`
`matrix()`	把所有 2D 变换方法组合为一个	参数如下：`matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())`

在这里插入图片描述
此处使用百分比取值法时，可以比较容易实现盒子水平垂直居中

旋转会改变坐标轴向，多重转换以第一种转换的坐标轴为准

注意使用多个属性时，属性值要使用复合属性，即中间用空格隔开

在这里插入图片描述

在这里插入图片描述
translate3d写法必须写满三个数。因为电脑是平面，所以默认状态下无法看到z轴平移效果。得使用以下视距属性：

注意是直接赋值给父级，视距属性范围在800-1200比较符合人的视觉习惯

在这里插入图片描述
每个面都有自己独立的坐标轴，自己旋转后不会影响其他面坐标轴

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】