2D 23.2.23

2023.2.21

2D

平移属性：transform:translate(x,y)；

变换属性：

transform:translate(x,y)；沿着x轴和y轴移动

transform:translateX(x)；沿着x轴移动

transform:translateY()；沿着y轴移动

取值：px   百分比（相对于元素本身进行计算）  

允许负值，正值默认向下向右，负值默认向上向左

盒子水平垂直居中

2d旋转 deg（度）

transform：rotate(45deg);沿着中心点旋转，默认值

transform：rotateX(45deg);沿着x轴旋转

transform：rotateY(45deg);沿着y轴旋转

单位：deg

当角度为正值，顺时针旋转

当角度为负值，逆时针旋转

元素的基点位置：设置围绕哪个点进行变化

transform-origin：水平方向 垂直方向；

取值：px 百分比（相对于元素自身的宽高计算）

关键字：水平：left、center、right

  垂直：top、center、bottom

一个值，另一个值默认为center

2d缩放

transform：scale（x，y）沿着x轴和y轴缩放 只有一个值时，沿着水平和垂直方向等比例缩放

transform：scaleX(x);沿着x轴缩放

transform：scaleY(y);沿着y轴缩放

取值：负值：先翻转，然后 沿着x轴和y轴放大或缩小

缩小：0-1之间 0表示缩没了 1表示正常大小

过渡动画

transition-property：css样式；

参与过渡的css属性名称？默认值：all

transitio-duration：1s；s ms毫秒 1s=1000ms

规定过渡执行的时间

transition-property：all；所有属性参与过渡

transition-delay：规定过渡的延迟时间；

transition-timing-function：规定动画执行的速度类型；

取值：linear匀速 以相同的速度开始到结束

  ease（默认值）慢速开始---速度变快---慢速结束

  ease-in慢速开始的过渡效果（加速）

  ease-out慢速结束的过渡效果（减速）

  ease-in-out慢速开始和结束的过渡效果

多个属性参与过渡用逗号隔开

简写：transition：css样式 过渡的执行时间 速度类型 过渡延迟时间；

注意：谁发生了属性的改变就加在谁身上

2D倾斜

transform：skew（x，y）；沿着x轴和y轴倾斜

transform：skew（x）；沿着x轴倾斜

transform：skew（y）；沿着y轴倾斜

一个值时 只沿着x轴水平方向倾斜

旋转、位移、缩放、倾斜复合写法

属性和属性之间空额隔开 先位移再旋转

transform：translate（-50%，-50%） rotate（45deg） scale（2）；

搭建3D空间

transform-style：preserve-3d；创建3d空间

什么时候搭建3d舞台？

父元素有3d变形，子元素也有3d变形

景深：perspective 属性值为透视点（眼睛）到元素的距离，近大远小，也可以让网页产生3d效果。(写给父盒子或body)

3D位移

transform：translateZ（z）;沿着z轴方向移动

transform：translate3d（x，y，z）;沿着x、y、z轴方向同时移动

3D旋转

transform：translate3d（x，y，z，度数）;

x y z 是一个0-1之间的数值，

例：transform：translate3d（1，1，1，45deg）;1=45deg

两个值不为0，定义多轴旋转 才能用小数

3D缩放

transform：scale3d（x，y，z）

0-1缩小

1以上放大

注意：scale单独使用看不到效果，需要搭配其他的变换属性