2D 3D 景深 动画 阴影

2D

二维的平面空间，让元素在X轴或者Y轴进行变化

2D里面的功能函数

2D-位移

2D-旋转

2D-缩放

2D-倾斜

变形属性

transform：；

位移：transform：translate（）；

旋转：transform：rotate（）；

缩放：transform：scale（）；

倾斜：transform：skew（）；

2D位移

transform：translate（x，y）

X在x轴移动的位置

Y在y轴移动的位置

transform：translateX（）或者Y（）

透明属性：

opacity：

属性值：0-1的数值

0是全透明

1是不透明

2D旋转

transform：rotate（deg）；

绕着x轴旋转：transform：rotateX（）；

绕着y轴旋转：transform：rotateY（）；

2D缩放

transform：scale（）；

如果scale括号里面一个值的时候整体缩小或者放大

如果括号里面2个值的时候第一个x轴缩小或者放大第二个y轴缩小或者放大

括号内部参数设置0-0.9999缩小   大于1就是放大

2D倾斜：

transform：skew（）；

transform：skewX（deg）

transform：skewY（deg）

transfrom：skew（30deg）

变形原点：

改变变形原点的位置：

transform-origin：X Y；

X横向的位置  y纵向的位置

接受的值：

X      Y

left  center

right  top

50%   50%

10px  10px

左右 上下

多个功能函数使用的时候

尽量先写位移再旋转

尽量先写位移再写缩放

让元素的背面不可见

background-visibility：hidden；

Css选择符：

目标伪类选择器：

语法：

元素：target{

当前元素，被超链接指向的时候，执行的样式

}

大图定位fixed固定定位

圆角的实现

border-radius：50%；

景深

模拟近大远小的视觉效果

perspective：；值越大表示离得越远

通常指在900-1200之间，放在父元素上面

perspective-origin：；控制视角

left top 往左上角看

right top 右上角

3D：立体空间

多了个Z轴 形成一个3D空间

transform-style：preserve-3D；（放在父元素上面）默认值falt

transform：translateZ（）；

正值向前 负值向后

3D旋转：

transform：rotate3d（x，y，度数）

transform：rotateZ（）

参数x，y，z是一个矢量值

0代表不旋转 ，1 代表旋转

解释x，y，z矢量值，绘制一个点，绘制出得这个点和变形原点形成一条线，这条线就是旋转的轴

旋转的正负值：

绕着X轴：

如果元素往后躺：正值   前趴：负值

绕着y轴：

右侧转 ：正值 左侧转：负值

Y轴位移：

向下移动：正值 向上移动;负值

X位移正负值：

右移：正值 左移：负值

Z轴位移

前移：正值 后移：负值

3D缩放

transform：scale3d（x，y，z）；

transform：scaleZ（）；

动画

不用任何事件触发，能自动执行

制作关键帧

语法：

@keyframes 关键帧名称 {

from{}

to{}

}

常用方法：

@keyframes 关键帧名称 {

0%{

动画开始状态

}

100%{

动画结束状态

}

}

调用关键帧：

anmiation：复合属性（简写形式）；

调用关键帧的名称

anmiation-name

关键帧名称

动画执行的时间（s，ms）

动画的延迟时间

动画的类型：（linear（匀速））step-start

动画的次数：直接写次数  无限循环（infinite）

动画的方向：反向运动（reverse）

交替运动（alternate）

先正后反（alternate-reverse）

动画的状态：

animation-play-state：；

running 运动

paused 暂停

让动画停在最后一帧：

forwards

steps（参数1，参数2）

参数1：把动画分为几个阶段

参数2：end/start 默认是end

border-radius：100%； 正圆

box-shadow：；阴影