人机交互与界面设计8.pptx

CSS3基本功能 ——过渡、动画 ——过渡、动画 内容提要 CSS3 过渡 变形过渡 CSS3 动画 关键帧 简单动画效果 动画属性与变形属性结合应用 语法 transform：none | matrix(number,number,number,number,number,number)? translate(length[,length])? translateX(length)? translateY(length)? rotate(angle)? scale(number[,number])?scaleX(number)? scaleY(number)? skew(angle[,angle])? skewX(angle) || skewY(angle)? 默认值：none 变形语法复习 变形3D效果 transform-style:规定如何在3D空间中呈现被嵌套的元素 flat 子元素将不保留其 3D 位置 preserve-3d 子元素将保留其 3D 位置 对相应变化的标签使用3D效果 -webkit-transform-style: preserve-3d; 3D效果视角 perspective 属性定义 3D 元素距视角点的距离，以像素计 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身 persp