• 变形的类型: • 2D • 3D
武汉传媒学院
8.2 CSS3的2D变形
• 2D变形函数
• translate():元素从其当前位置移 rotate():元素顺时针旋转给定的角度
• scale():缩放元素
• skew():沿X/Y轴斜切
• matrix():把所有 2D 转换方法组合 在一起
武汉传媒学院
武汉传媒学院
描述 没有属性获得过渡效果。 所有属性获得过渡效果 属性列表，以逗号分隔。
8.1 CSS3过渡 • 过渡属性： •transition-duration： 完成过渡效果 的时间（以秒或毫秒计） •语法： transition-duration: time;
以s或ms计，默 认值是 0，意味 着不会有效果
使用像素/百分比
例8-2
transform: translate(-20px, -20px);
武汉传媒学院
8.2 CSS3的2D变形 • translate居中绝对定位的元素
例8-3
武汉传媒学院
8.2 CSS3的2D变形 • ratate()：使元素按指定角度相对原点进 行顺时针旋转
例8-2
transform: rotate(30deg);
武汉传媒学院
8.1 CSS3过渡
• 过渡属性： • transition-timing-function：过渡 效果的速度曲线
• 语法： transition-timing-function: 值;
武汉传媒学院
8.1 CSS3过渡 值 linear ease(默认) ease-in ease-out ease-in-out cubicbezier(n,n,n,n)
• 不同时间段过渡不同属性:
transition-property: border,color,text-shadow; transition-duartion: 2s , 3s , 8s;
武汉传媒学院
8.2 CSS3的2D变形 • 变形:改变元素的形状,transformation
• 变形与过渡的区别:过渡是变化的过程,变 形是变化后的形状
必须设置transitionduration 属性，否则时长 为 0，不会产生过渡效果
武汉传媒学院
8.1 CSS3过渡
• 过渡属性： • transition-property：应用过渡效果的CSS 属性的名称 • 语法： transition-property: none|all|property; 值 none all property
8.4 CSS3动画效果 • animation：是一个简写属性，用于设置以 下六个动画属性： • animation-name • animation-duration • animation-timing-function • animation-delay • animation-iteration-count • animation-direction • 注：必须定义 animation-duration 属性， 否则时长为 0，就不会播放动画了
武汉传媒学院
8.3 CSS3的3D变形 • scale3d(x,y,z):让元素在x,y,z轴上按比 例缩放 • scaleZ()：让元素在z轴上按比例缩放 • 注： • 默认值为１ • 当值大于１时，元素放大 • 小于１大于0.01时，元素缩小 • caleZ()和scale3d()需要配合其他的变 形函数才会有效
8.2 CSS3的2D变形 • scale():元素根据中心原点对对象进行缩 放 • 默认值为1 • 值为0.01到0.99之间时，使元素缩小 • 大于或等于1.01的值，使元素放大
例8-2 transform: scale(1.4);
武汉传媒学院
8.2 CSS3的2D变形
• translate()：将元素向指定的方向移动 • translate(x,y)：使元素水平方向和垂直方向 同时移动 • translate(x)：使元素水平方向移动 • translate(y)：使元素垂直方向移动
武汉传媒学院
8.4 CSS3动画效果
• animation-delay:定义动画开始延 时，以s或ms计,默认值是 0 • 语法 animation-delay: time;
武汉传媒学院
8.4 CSS3动画效果
• animation-iteration-count：定义动画的播放 次数 • 语法 animation-iteration-count: n|infinite;
武汉传媒学院
目录
•CSS3过渡 •CSS3的2D变形 •CSS3的3D变形 •CSS3动画效果
武汉传媒学院
8.1 CSS3过渡
• 过渡
元素
属性A: 值1
平滑过渡
属性A: 值2
• 例：超链接的悬停状态
武汉传媒学院
8.1 CSS3过渡 • 元素不能从display:none开始过渡 • 过渡声明在初始状态上
武汉传媒学院
8.2 CSS3的2D变形
• transform-origin:改变元素的原点位置，默认 中心点是居于元素X轴和Y轴的50%处
• transform-origin:270px 20px;
武汉传媒学院
取值可以是像 素或百分比
8.3 CSS3的3D变形
例8-4
• perspective：定义 3D 元素距视图的距离
武汉传媒学院
8.4 CSS3动画效果
• CSS3动画：使用基于时间线的动画关键帧技术
• 组成部分： • 关键帧声明 • 使用关键帧声明
例8-5
武汉传媒学院
8.4 CSS3动画效果
• 关键帧声明： @keyframes 名称{ 时间轴百分比1{样式;} 时间轴百分比2{样式;} …… }
武汉传媒学院
武汉传媒学院
8.4 CSS3动画效果
• animation-timing-function：动画的速度曲线 值 描述 linear 匀速 ease(默认) ease-in ease-out ease-in-out 低速开始，然后加快， 慢速结束。 低速开始。 低速结束。 低速开始和结束。
cubic-bezier(n,n,n,n) 自定义速度（0~1）。
武汉传媒学院
8.2 CSS3的2D变形 • skew():让元素以中心围绕着X轴和Y轴按照 一定的角度倾斜
以deg为单位， 不会旋转，而只会改变元素 的形状 • 一个参数：表示水平方向的倾斜角度； • 两个参数：第一个参数表示水平方向的倾斜角度， 第二个参数表示垂直方向的倾斜角度
例8-2 transform: skew(40deg, 12deg);
武汉传媒学院
8.4 CSS3动画效果 • animation-name :为 @keyframes 动画规 定名称 • 语法 animation-name: keyframename|none; • animation-duration :定义动画完成一个 周期所需要的时间，以s或ms计 • 语法 animation-duration: time;
武汉传媒学院
8.2 CSS3的2D变形 • matrix(): transform: matrix(a, c, b, d, tx, ty); /matrix 自动生成 工具
例8-2 transform: matrix(1.178, -0.256, 1.122, 1.333, -41.533, -1.989);
例8-1
武汉传媒学院
8.1 CSS3过渡
• 浏览器支持 属性 浏览器支持 transitio n
IE9以上
武汉传媒学院
8.1 CSS3过渡
• 过渡属性 • transition：简写属性，用于设置四个过渡属 性 • 语法：
transition: property duration timing-function delay; 例：transition: width 2s;Βιβλιοθήκη 值n infinite
武汉传媒学院
描述 定义动画播放次数 的数值。 规定动画应该无限 次播放。
8.4 CSS3动画效果
• animation-direction：定义是否应该轮流反向 播放动画 • 语法： animation-direction: normal|alternate;
值 normal
alternate
武汉传媒学院
描述 默认值，动画应该 正常播放 奇数次正常播放， 偶数次反向播放
8.4 CSS3动画效果 • animation-fill-mode：保留动画结束时的 值
动画默认原则是内外不干涉，动画结 束返回元素初始状态
例8-8
武汉传媒学院
为元素定义 perspective 属性时，其子元素 会获得透视效果，而不是元素本身
武汉传媒学院
8.3 CSS3的3D变形
例8-6
• translate3d(x,y,z):规定指定元素在 三维空间中的位移 • translateZ():元素在Z轴进行位移
武汉传媒学院
8.3 CSS3的3D变形 • rotateX(a)：元素围绕 X 轴以给定的度数 进行旋转a角度 • rotateY(a)：元素围绕 Y 轴以给定的度数 进行旋元素a角度 • rotateZ(a)：元素围绕 Z 轴以给定的度数 进行旋元素a角度 • rotate3d(x,y,z，a）：元素围绕 [x,y,z] 向量进行旋转a角度
武汉传媒学院
描述 匀速过渡 慢速-变快-慢速 慢速开始的 慢速结束 慢速开始和结束 规定速度曲线，值 （ 0 ~ 1）
8.1 CSS3过渡 • 过渡属性： • transition-delay：延时 • 语法： transition-delay: time;