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

​

1.flex布局

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

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 属性的简写属性。

flex项目属性：

属性	描述
order	规定弹性项目相对于同一容器内其余弹性项目的顺序。
flex-grow	值为数字，项目相对的扩大程度
flex-shrink	值为数字，项目相对的缩小程度
flex-basis	值为带单位的长度（如px），flex项目的初始长度
align-self	用于弹性项目。覆盖容器的 align-items 属性。

2.过渡transition属性

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

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

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

• 要添加效果的 CSS 属性
• 效果的持续时间

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

3.2D转换transform属性

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

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

此处使用百分比取值法时，可以比较容易实现盒子水平垂直居中



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

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

4.3D转换transform属性

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

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

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

每个面都有自己独立的坐标轴，自己旋转后不会影响其他面坐标轴

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