2020-12-17

2D转换

一、过渡
1、 transition 过渡
之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。
css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。
2、 transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须
例如

 div{
 transition-property: all ;
 }
 /*给所有属性设置过渡效果*/

3、 transition-duration: 过渡的时间，单位可以是s或者ms。 必须
4、 transition-delay:指定过渡生效的延迟时间。
5、 transition-timing-function:
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
6、 过渡属性 完成时间 运动曲线 延迟时间

 div{
 transition: all 2s linear 4s;
 }

transition：all 3s linear 1s;
一般有数值/中间状态的属性才可以设置过渡，比如：width，height

2D转换

1、缩放，位移，旋转，倾斜
transform 属性。
缩放：
放大缩小。
格式
transform：scale(x,y);
x:代表水平方向的缩放倍数
y：代表垂直方向的缩放倍数。
如果只写一个值，代表等比例缩放。
不会改变真实宽高，也不会对旁边的盒子造成影响。
2、 位移 translate
格式：
tramsform：translate（水平位移，垂直位移）
属性值：
px 正值：向右或向下。
百分比 是按照盒子本身的宽高。
只写一个值时，是水平位移。
3、旋转：rotate
格式： transform：rotate（角度）
单位：deg

3D旋转

一、3D旋转
1、3D旋转比2D旋转多了一个rotateZ(),有了立体感
3D旋转：
transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。
rorateX，X轴旋转

div{
transform: rotateX(180deg);
}
/* 围绕其在一个给定度数X轴旋转的元素。    */

rorateY，Y轴旋转

div{
transform: rotateY(180deg);
}
/* 围绕其在一个给定度数Y轴旋转的元素。    */

rorateZ， Z轴旋转

div{
transform: rotateZ(180deg);
}
/* 围绕其在一个给定度数Z轴旋转的元素。    */

2、旋转的方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。
二、perspective
1、规定 3D 元素的透视效果，设置给变换盒子的父容器。

div{
perspective: 500;
}
/* 设置从何处查看一个元素的角度    */

2、透视：
设置用户眼睛与屏幕的距离。
透视效果只是视觉上的呈现，不是真正的距离。
3、格式：perspective: number|none;
number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。

3D位移

一、3D位移
1、transform: translateX(); //沿着x轴移动
transform: translateY();//沿着Y轴移动
transform: translateZ();//沿着Z轴移动
transform: translate3d(x,y,z);
2、perspective 透视
translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。

3D呈现

一、3D呈现
1、某个图形是由多个元素组成的。可以给这些元素的父元素添加一个transform-style：persevere-3d 来使其变成一个真正的3d图形。