css动画样式

一，css3新增了动画效果，目前

使用transform属性实现元素在空间内的移动，旋转缩放等效果，

1，空间：是从坐标轴定义的，x，y，和z三条坐标构成了一个立体空间，z轴位置与视线相同空间转换也叫3d转换，属性名唤transform

二，空间位移

语法：

transform:translate3d(x,y,z);

transform:translatex() transform:translatey() transform:translatez()

取值（正负均可） 像素单位数值 百分比

三，透视

简单来说就是给大盒子加上一个属性，此属性名为 perspective:1000px一般在800-1200之间

四，

空间旋转 rotate

transform：rotatex（） transform：rotatey（） transform：rotatez（）

五，立体呈现

实现方法：添加 transform-style：preserve-3d 让子元素处于真正的3d空间

空间缩放 ：tansform：scale（）

定义动画，@keyframes 动画名称{

0%{}

10%{}

15%{}

100%{}

}

2，使用动画 animation：动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态。

infini为无限循环 alternate为反方向 ：hover{
animation-play-state:paused}鼠标放上去暂停

实现3d反转的导航栏大致思路