移动web：3D&动画

空间转换

空间位移

• transfrom: translateX( )
• transfrom: translateY( )
• transfrom: translateZ( )

透视、景深、视距

body {
            perspective: 800px; 
}

• perspective
• 添加给父级 实现近大远小的效果
• 范围一般在 600px -1200px

空间旋转

• transform: rotateX( );

  • 沿x轴旋转

• transform: rotateY( );

  • 沿y轴旋转

• transform: rotateZ( );

  • 沿z轴旋转

• 左手法则

  • 与方向有关

• 了解

  • rotate3D(x, y, z, 角度);

    • 自定义轴旋转
    • x, y, z 的取值范围为 0-1 之间的数字
    • 第四个值为旋转角度

立体呈现

• transform-style

  • flat

    • 平面
    • 默认值

  • : preserve-3d 开启3d环境

    transform-style: preserve-3d;

    • 配合perspective使用
    • 给父级添加
    • 使子元素真正处于3D空间

动画

1. 定义动画

• @keyframes

  • 关键帧

• from{} to{}

@keyframes test {
            from {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }

            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
}      

• 0% ... 20% ... 100%

 @keyframes test {
            0% {}

            20% {
                transform: rotateY(30deg);
            }

            40% {
                transform: rotateZ(30deg);
            }

            60% {
                transform: rotateX(130deg);
            }

            80% {
                transform: rotateZ(60deg);
            }

            100% {
                transform: rotateX(30deg);
            }
 }

2. 使用动画

• animation

  animation: name duration timing-function delay iteration-count direction fill-mode;

  • 必写属性

    • 动画名
    • 时间

  • 属性连写

    • animation： 动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置

    • animation: name duration timing-function delay iteration-count direction fill-mode;

      • 常用属性

        • 速度曲线

          • ease

            • 默认
            • cubic-bezier.com/#.17,.67,.8…

          • linear

            • 匀速

          • steps（）

            • 逐帧动画

        • 次数

          • infinite

            • 无数次

        • 反向播放

          • alternate

        • 停留结束位置

          • forwards

        • 暂停动画

          • animation-play-state: paused;

        • 动画延迟

          • animation-delay