CSS3笔记（五）3D转换 与 动画

3D转换

所有的3d旋转，对着正方向去看，都是顺时针旋转
透视: 加给变换的父盒子
透视 设置的 用户 眼睛和屏幕的距离
仅仅只是视觉呈现出3d 效果，并不是正真的3d
perspective:600px;
perspective-origin:0 0;

沿着x轴旋转
transform:rotateX(360deg);
沿着y轴旋转
transform:rotateY(360deg);
沿着z轴旋转
transform:rotateZ(360deg);

沿x轴位移
transform:translateX(300px);
沿Y轴位移
transform:translateY(300px);
沿Z轴位移    
translateZ必须配合透视来使用
transform:translateZ(300px);

transform-style:preserve-3d;\
可以让里面的子盒子保持3d 效果，加给父盒子
preseve-3d: 让子盒子 位于3d空间里面
flat： 子盒子被扁平化


backface-visibility:hidden 背面不可见

动画

animation:move 1s  alternate linear 3 ;
animation: 动画名称 持续时间  执行次数(infinite:无限次)  是否反向  运动曲线 延迟执行

css3中的动画使用：
    类似js中的函数：
    ---先定义 ---再调用
    js 定义函数：
        function donghua(){ 函数体}
    调用： donghua();
    
    CSS3中的动画：
    定义动画：
        @keyframes 动画名{
            from{ 初始状态}
            to{结束状态}
         }
        @keyframes 动画名{
            0%{ 初始状态}
            100%{结束状态}
         }
    
     调用：基本语法格式
     animation: 动画名称 持续时间;

动画名称： animation-name: move
单次动画执行时间：animation-duration: 2s;
重复次数  animation-iteration-count: 1;   infinite 无数次
动画方向：animation-direction    alternate：交替  normal正常的
动画延迟：animation-delay: 1s;
动画结束后的所保持的状态：
animation-fill-mode:
    backwards:保持动画开始前的状态
    forwards:保持动画结束后的状态
运动曲线：animation-timing-function
linear 匀速  ease-in-out :先加速后减速  steps
steps(ｎ) 让动画分步完成
animation-timing-function: steps(15);
动画的播放状态 ：paused 暂停 running 运行
animation-play-state: paused;