【Day15】CSS3 3D

学习内容

• 3D概述
• 3D变化
• 帧动画

3D概述

x,y,z 组成3D场景
z 简单理解成前后

perspective: 元素和视角之间的距离 实现近大远小
             范围一般是900-1200
             只设置给父元素

perspective-origin: 3D效果的观察位置 (方位词,数值+单位,百分比)

transform-style: flat以2D效果展现 (默认) preserve-3d以3D效果呈现
一般给父级设置，设置3D舞台

3D变化

transform
3D平移
translate3d(x,y,z)
translateZ(z)

3D缩放
scale3D(x,y,z)
scaleZ()
3D缩放单独使用时看不出效果，一般要结合其他变化效果使用

3D旋转
rotateX
rotateY
rotateZ
rotate
rotate3D(×,y,z,deg) x,y,z范围是0-1

帧动画

定义帧动画
@keyframes 自定义动画名称{
    from(初始状态){
        属性名: 属性值;
    }
    to(结束状态){
        属性名: 属性值;
    }
}

@keyframes自定义动画名称{
    0%{
        属性名: 属性值;
    }
    …%{
        属性名: 属性值;
    }
    100%{
        属性名: 属性值;
    }
}

调用帧动画
animation-name: 自定义动画名称
animation-duration: 帧动画持续时间
animation-delay: 帧动画延迟时间
animation-timing-function: 帧动画运动方式 linear ease ease-in ease-in-out ease-out
animation-iteration-count: 帧动画执行次数 数值 infinite 无限循环执行
animation-direction: 帧动画运动方向
    normal 正常 (默认)
    reverse 反方向运动
    alternate 先正常后反向
    alternate-reverse 先反向后正常
animation-play-state: 检索帧动画状态 (运动还是停止) 一般结合js来判断或者hover效果
    属性值: running 运动
            paused 暂停

复合属性: animation