Week4 day2 3D景深以及动画

Week4 day2 3D景深以及动画

今日总结：今天学习了3D中的景深，以及当写出3D效果时让背面被遮盖的地方看不见的方法，并且学习了动画的部分知识，也自己尝试做了两种简单的效果。

3D旋转

3d旋转：
rotateZ();

rotate3d(x,y,z,度数)
注：x y z 一个矢量值 0 不旋转 1 旋转
eg:rotate3d(1,1,0,45deg)
等价于：rotateX(45deg) rotateY(45deg)
在3D效果中最重要是还是在自己脑海中有一种3D的构图，如果自己脑中可以想象出构图的话，做起来会简单不少，而且在做旋转时也会在定位上少做许多无用功。

backface（背面）属性

在做3D效果时。假如制作一个立方体，立方里的面我们把他的背景图做成半透明状，这时我们会通过穿透效果看到后面的面，这时就需要此标签。来让后面被遮盖的面看不见。
让背面不可见：
backface-visibility:hidden;

景深

横看成岭侧成峰，远近高低各不同。
不识庐山真面目，只缘身在此山中。
这两句古诗中都包含一种当视觉处于不同方向时，看到的物体是呈现不一样的效果的。
加入景深效果，会让3D效果看起来更加生动。

近大远小 -> 景深
perspective景深： 值越大距离越远 ( 给父元素添加 )
perspective:500px;
900px - 1200px是最佳视角

景深得视角：
perspective-origin:
中间：center
左上角: left top
右上角：right top。

动画

制作关键帧

1：制作关键帧

@keyframes 动画名称{
开始
from{
left:0;
}
结束
to{
left:500px;
}
}
在开始和结束中，我们可以添加中间的帧数，添加的越多，动画看起来就会更加流畅。

调用关键帧

调用关键帧：
简写方式：

animation:
动画的名称
动画的时间
延迟时间
动画的类型
动画循环的次数 （无限循环：infinite）
动画运动的方向（reverse alternate[先正后反] alternate-reverse[先反后正])
运动的状态： animation-plat-state : running paused(暂停)
动画停止的状态: animation-fill-mode:forwards (停在最后一帧);

动画的类型：
linear 匀速
ease 默认值
step-start:马上跳到动画每一结束桢的状态。

transition和 animation的区别

transition 和 animation的区别：
transition需要事件触发（例如：鼠标滑过）
animation：自动触发

案例

通过今天的学习我做了两种不同案例

1.立方体旋转

效果如图

html

css语言

每一面的位移

调用关键帧

案例2

用今天学习的知识做出一个动态旋转相册。
（我是一个JO厨）
效果如图

代码实现如下
html

css代码

每一张图片以及中心图片的位移

调用关键帧