HTML5+CSS3程序设计第10章CSS3中的变形与动画

应用transform属性实现平移
translate(<length>[,<length>]) translateX(<length>)
translateY(<length>)
参数
像素值
应用transform属性实现平移
X正 右移动
X负
左移动
Y正 Y负
下移动
上移动
应用transform属性实现缩放
指定过渡的持续时间
transition-duration 过渡持续的时间
指定过渡的持续时间
该属性的语法格式如下： transition-duration：<time>[ ,<time> ]*
目前主流浏览器并未支持标准的transform-duration属性，所以在实际开发 中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀； 为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
scaleX(<number>)
scaleY(<number>)
scale(<number>[[,<number>])
transform的基本属性值
skew(<angle>[,<angle>]) skewY(<angle>)
skewX(<angle>)
rotate(<angle>)
matrix(<number>,<number>,<number>,<number>,<number>,<number>)
指定过渡的动画类型
transition-timing-function 过渡的动画类型
指定过渡的动画类型
CSS 中的变形与动画
01
2D变换——transform
03
动画——Animation
02
过渡效果——transition
1
2D变换—ຫໍສະໝຸດ Baidutransform
主要内容
1
transform的基本属性值
2 应用transform属性实现旋转
3
应用transform属性实现缩放 应用transform属性实现倾斜
transition-property：all | none | <property>[ ,<property> ]
指定参与过渡的属性
all none <property>
目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中 还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀； 为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
指定过渡的延迟时间
transition-delay 过渡延迟的时间
指定过渡的延迟时间
该属性的语法格式如下： transition-delay：<time>[ ,<time> ]
目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中 还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀； 为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
目前主流浏览器并未支持标准的transform属性，所以在实际开发中还需要 添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏 览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
应用transform属性实现倾斜
skew(<angle>[,<angle>]) skewX(<angle>)
skewY(<angle>)
参数值
度数
deg
变形原点
transform-origin 变换中心点
两个参数值
一个参数值
50%
变形原点
语法格式如下： transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
4
应用transform属性实现平移
5
6
变形原点
transform的基本属性值
transform
平移 缩放
旋转
倾斜
transform-origin
中心点
transform的基本属性值
none translateX(<length>) translate(<length>[,<length>])
translateY(<length>)
transform的基本属性值
transform属性支持一个或多个变换函数。也就是说，通过transform属性可 以实现平移、缩放、旋转和倾斜等组合的变换效果。例如，实现平移并旋转效 果。不过在为其指定多个属性值时不是使用常用的逗号“,”进行分隔，而是使用 空格进行分隔。
应用transform属性实现旋转
目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中 还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀； 为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加webkit-前缀。
变形原点
<percentage> <length>
left
center
right center
top bottom
2
过渡效果——transition
主要内容
1
指定参与过渡的属性
2 指定过渡的持续时间
3
指定过渡的延迟时间
4
指定过渡的动画类型
指定参与过渡的属性
transition-property
参与过渡的属性
指定参与过渡的属性
该属性的语法格式如下：
rotate(<angle>) 2D旋转 <angle>
正值
顺时针
负值
逆时针
应用transform属性实现缩放
scale(<number>[,<number>]) scaleX(<number>)
scaleY(<number>)
一个参数
指定的比例
应用transform属性实现缩放
当使用scaleX(<number>)或scaleY(<number>)函数时，实现的是非等比例 缩放，也就是只能对X轴进行缩放或者只能对Y轴进行缩放。