2021-08-02

CSS3的3D设置
2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

transform属性
平移
transform : translate(200px);平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的
transform : translatex(200px);根据X轴给定的参数,从当前元素位置移动。
transform : translateY(200px);根据Y轴给定的参数,从当前元素位置移动。
transform : translatez(200px);定义3D转换,只是用Z轴的值。
transform : translate(10px,20px);定义2D平移移动。
transform : translate3d(10px,20px,30px);定义3D平移移动。
简写： transform : translatex(200px)translateY(200px)translatez(200px); transform : rotate(30deg);旋转单位deg 默认是Z轴旋转

旋转:
transform : rotatex(30deg);根据X轴给定的参数,从当前元素位置旋转。
transform : rotateY(30deg);根据Y轴给定的参数,从当前元素位置旋转。
transform : rotatez(30deg);定义3D转换,只是用Z轴的值。
简写：transform : rotateX(30deg) rotateY(30deg)rotatez(30deg);

缩放：

transform : scale(2);缩放默认是X和Y同时缩放默认值是1
transform : scaleX(2);通过设置×轴的值来定义缩放转换
transform : scaleY(3);通过设置丫轴的值来定义缩放转换。
transform : scaleZ(2);通过设置Z轴的值来定义3D缩放转换。
transform : scale(2,5);定义2D缩放
transform : scale3d(2,3,4);定义3D缩放。
简写：transform : scaleX(2) scaleY(3) scaleZ(3);该元素增加或减少的大小，取决于宽度(X轴)和高度(Y轴)的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg),然后在进行缩放

transform ：skew 倾斜

transform ：skewX(30deg)；通过设置 X 轴的值来定义倾斜转换

transform ：skewY(30deg)；通过设置 Y轴的值来定义倾斜转换

transform ：skew(30deg,130deg)；定义2D倾斜

transform ：skewX(30deg)  skewY(130deg)  ；

注意点：倾斜没有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: preserve-3d； 指定嵌套元素如何在3D空间中呈现

preserve-3d：表示所有子元素在3D空间中呈现。

注意：transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素

perspective：200px；  景深   视距

用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。

perspective-origin

是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度

旋转背面是否可见：backface-visibility

backface-visibility属性 backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素，该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。

语法：backface-visibility: visible | hidden  visible：为backface-visibility的默认值，表示反面可见 hidden：表示反面不可见

动画animation属性
animation- name:mymove;是用来定义一个动画的名称mymove是由@Keyframes创建的动画名mymove要和Keyframes中的mymove一致
animation-duration 运动时间默认是0s
animation-delay延迟时间默认是0s
animation-timing-function动画的播放方式，具有以下六种变换方式: ease;ease- in;ease-in-out;inear;cubic- bezier,steps (帧数);
animation- iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1";linfinite为无限次数循环。
animation-direction定义是否应该轮流反向播放动画。如果animation-direction值是"alternate"，则动画会在奇数次数(1、 3、5等等)正常播放，而在偶数次数(2、4、6等等)向后播放

animation和transition的区别？ 相同点：都是随着时间改变元素的属性值。 不同点： transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。