04css3第二天-课件基础二

新·模式同时采用最合理的TS教学模式和最合理教学时间安排.全程手把学、边学边练，

7*12小时答疑指导，保证学员即学即会。薪·未来无限互联学生毕业平均薪资12755元，比

业机构平均高出12%。98%的无限互联学生在毕业4周内成功就业！信·机构慧科教育

旗下泛IT职业教育培训机构。与找座儿形成国内第一家O2O混合式教学

。良心教学，

赖大机构！心·服务多年教学经验资深讲师倾心教学配备专门的生活导师，提供入学接送、精选宿舍、生活指导、学习督促等一条龙服务。提供专业就业指导服务，简历指导+模拟面试，保证快速就业。走进无限互联本章知识点transition过渡与2D转换CSS3动画属性，函数及使用3D

转换

与视点的概念，属性、函数的使用一、transition过渡与2D转换transition参数transition过渡完成事件2D转换参数及使用transition过渡过渡指一个元素在不同的状态之间进行平滑的转换CSS3中使用transition属性实现过渡效果transition过渡transition属性的参数（均为可选）transition-property要运动的样式:none(无)/all(所有)/某一属性transition-duration运动时间：0s（默认）transition-delay延迟时间：0s（默认）transition-timing-function

运动形式ease

（逐渐变慢）默认均速加速linearease-inease-outease-in-out

先加速后cubic-bezier

曲线transition过渡cubic-bezier曲线https

/ceaser该可以生成曲线坐标transition过渡transition过渡完成事件：Webkit内核：

obj.addEventListener(“webkitTransitionEnd”,function(){},false)firefox：obj.addEventListener(“transitionend”,function(){},false)2D转换转换的概念：就是使用transform属性将HTML元素进行移动translate旋转rotate缩放scale倾斜skew转换方式：2D转换：在二3D转换：在三内转换内转换2D转换-translate用法：transform：translate（x轴移动距离(长度值/%),y轴移动距离(长度值/%)）2D转换-rotate用法：transform：rotate（45deg(角度)）正数为顺时针旋转，负数为逆时针旋转2D转换-scale用法：transform：scale（x(宽放大倍数)，y(高放大倍数，可选，默认值同第一个参数)）2D转换-skew用法：transform：skew（沿x轴倾斜的角度，沿y轴倾斜的角度（可选，默认为0度））2D转换-matrixmatrix矩阵：transform：skew（a,b,c,d,e,f）对应矩阵变换公式2D转换-matrixmatrix矩阵使用：去吧,

水偏移：transform:matrix(与我无关,哪位,怎么不去高考,打平偏移距离,垂直偏移距离);2D转换-matrixmatrix矩阵使用：缩放：matrix(1,

0,

0,1,

30,

30);第一个1缩放x轴，第二个1缩放y轴，假设比例为s，matrix（s，0，0，s，0，0）x

=

ax

+

cy

+

e

=

s*x

+

0*y

+

0

=

sxy

=

bx

+

dy

+

f

=

0*x

+

s*y

+

0

=

sy也就是matrix（sx，0，0，sy，0，0）等同于scale（sx，sy）2D转换-matrixmatrix矩阵使用：旋转练二、CSS3动画CSS3动画概念动画关键帧动画必需、可选属性CSS3动画动画分为两种：逐帧动画：组成动画的每一个画面就是一个帧关键帧动画：找到关键画面，并确定为关键帧，电脑会自动生成中间的过渡帧（CSS3动画就是关键帧动画）CSS3动画在CSS3中创建动画需要用到两个CSS特性（IE10以下不支持）标准：@keyframes

规则animation 属性webkit内核：@-webkit-keyframes

规则@-webkit-animation

属性动画制作步骤：先使用@keyframes创建出关键帧再使用animation属性让动画动起来CSS3动画关键帧—keyframes类似于flash，只需指明两个状态，之间的过程由计算机自动计算关键帧时间单位：数字：0%、25%，100%字符：from（0%），to（100%）CSS3动画调用动画—animation必要属性：animation-nameanimation-duration动画名称（关键帧名称）动画持续时间CSS3动画调用动画—animation可选属性：animation-timing-function运动形式linear

匀速ease

缓冲ease-in

由慢到快ease-out

由快到慢ease-in-out由慢到快再到慢cubic-bezier(p1x,p1y,p2x,p2y)

曲线animation-delay 动画延迟（只是第一次）animation-iteration-count

重复次数正整数 默认是1infinite

无限次CSS3动画调用动画—animation可选属性：animation-direction

动画

的方向normalreversealternate默认值，正向动画反向第一次正向，第二次反向alternate-reverse

第一次方向animation-fill-mode

动画，第二次正向前后状态none

默认值backwards

设置forwards

设置both之前的元素状态和第一帧相同之后的元素状态和最后一个关键帧相同backwards和forward的结合animation-play-state

控制动画

或暂停runningpaused默认值暂停练习二1、让篮球旋转2、当鼠标移动到篮球上停止旋转，移开继续旋转三、3D转换CSS3

3D转换的概念与视点的概念3D转换属性3D转换函数3D转换3D的概念：在过去相当长的一段时间内，3D技术一直被应用在桌面型应用程序内最近，随着显卡硬件加速（即GPU加速）技术的应用，3D技术也开始逐渐被应用在Web应用程序中2009年3月，CSS

3D

Transform模型正式推出，它允许Web应用程投影变形特性来投影、选择及序的开发者通过对页面上任何可视元素应用3D实现一个高级、令人惊叹的用户界面3D是对2D的一个扩展，增加了在3D空间中实现变形特性3D转换3D转换的概念：指HTML元素在3内进行移动，旋转，缩放，倾斜等操作3D转换的概念：下面是两个矩形，一个原始的状态，一个是沿三维坐标的x轴旋转90度后的状态发现旋转后离比较远的一条边会比较短，近的一边会比较长，这就是三中“近大远小”

的

效果原始旋转后3D转换视点的概念：视点就是人的眼睛看物体的那个位置，和物体的相对位置不同，例如距离的远近，位置的高低，或者左右的偏移所看到的物体的效果也不同3D转换3D转换属性：transform-style（preserve-3d）建立3D空间flat

默认，2D环境，子元素将不保留其3D位置preserver-3d

3D环境，子元素将保留其3D位置3D视距（景深）3D转换效果，因为默认的视点在窗口的中3D转换属性：缩放窗口发现不同的大小会有不同的心点-origin

设置视点位置3D转换转换函数：origin转换基准点transform-origin：x

y

z3D转换转换函数：rotate旋转rotateX（角度）rotateY（角度）rotateZ（角度）rotate3D(x,y,z,角度)xyz3D转换转换函数：translate移动translateX（lenght）translateY（lenght）translateZ（lenght）translate3D(lenght,lenght,lenght)

x，y，z轴的移动长度，不移动则为0，前两个值可以为百分比，最后一个必须为长度转换函数：scale缩放scaleX（number）scaleY（number）scaleZ（number）scale3D（number，number，number）

x，y，z轴缩放倍数，不缩放为13D转换转换函数：matrix3D（）（选讲）matrix3D（1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1）课后作业1