Css3D转换和关键帧动画

css3 3D转换

CSS 3D转换transform(3D位移、缩放、旋转)
让元素方式3d的变换，同2d变换一样，通过transform来设置,向元素应用 2D 或 3D 转换
位移：translate3D(x,y,z)
缩放：scale3d(x,y,z) scalez()不能单独使用；
旋转：rotatex( 沿着X轴旋转 ) rotatey( 沿着y轴旋转 ) rotatez(沿着Z轴旋转 )
如图：
Css3D转换和关键帧动画
观察的场所----3D空间transform-style

transform-style:preserve-3d; 表示所有子元素在3D空间呈现，

近大远小----景深perspective

元素距离观察点的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective:1200px;(在父元素中使用）

通常的数值在900-1200之间，如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉。

观察3D元素的（位置）角度----景深的角度perspective-origin
例：perspective-origin:left top （左上角）

Css3动画

通过 CSS3，我们能够创建动画，
这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式，

就能创建由当前样式逐渐改为新样式的动画效果。

nternet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
使用方法：
第一步：@-webkit-keyframes 动画名称{

                             0%｛ 本关键帧中的样式｝
                             
                             10%｛ 本关键帧中的样式｝
                                 。。。。。。
                             100%｛ 本关键帧中的样式｝
                              }

第二步：动画设计好后，使用animation属性调用动画。方法如下：
想加动画元素的选择器{
-webkit-animation: move 2s 3s linear 2 normal
｝

  动画名称    持续时间    延迟时间    运动轨迹      播放次数    是否倒放

webkit-animation-name:move; /动画属性名，前面keyframes样例定义的动画名/

-webkit-animation-duration: 10s; /动画持续时间/

-webkit-animation-timing-function: ease-in-out; /动画帧频，和transition-timing-function是一样的/

ease | linear | ease-in | ease-out | cubic-Bezier (n1 , n2, n3, n4)

-webkit-animation-delay: 2s; /动画延迟时间/

-webkit-animation-iteration-count: 10; /动画循环次数，infinite为无限次/

-webkit-animation-direction: normal; /定义动画播放方式/

默认normal，动画正常播放； alternate，动画轮流反向播放

实现动画的方法：
A、linear：从开始到结束都是以同样的速度进行.

B、ease-in：开始速度很慢，然后沿着曲线进行加快.

C、ease-out：开始速度很快，然后沿着曲线进行减速.

D、ease：开始时速度很快，然后沿着曲线进行减速，然后再沿着曲线加速.

E、ease-in-out：开始时速度很慢，然后沿着曲线进行加速，然后再沿着曲线减速.

F、step-start; /* 马上跳到动画每一结束桢的状态 */

Css3D转换和关键帧动画

css3 3D转换

Css3动画

相关推荐