初学WEB前端定要知道 CSS的延伸:CSS3高级属性——转换

1. CSS3高级属性——转换

transform: 转换、变形

语法：

选择器 {

transform: 变形函数

}

常用的2D转换函数：transform转化

(1)位移：translate(x)、translate(x, y)，无需指定轴点

(2)旋转：rotate(值deg)，值为正数就是顺时针转，值为负数的话就是逆时针转。

可以指定轴点transform-origin:X Y;

(3)缩放：scale(x) :一个值表示X轴和Y轴都控制

scale(x,y) ：两个值时，第一个表示X轴，第二个表示Y轴

1代表100%，就是他本身的数值。

可以指定缩放transform-origin:X Y;

(4)倾斜：skew(xdeg)、skew(xdeg, ydeg)，可以指定倾斜的原点

2、CSS3高级属性——过渡/渐变

transition：用户需要指定动画开始和结束两个点的状态，CSS3自动补全中间缺少的变化过程。

如下的CSS属性都可以执行渐变动画：

?颜色属性，如background-color、color

?取值为数值的属性，如width、opacity、font-size...

?转换属性，如transform:各种转换函数

注意：有些CSS属性是不能实现渐变动画的，如字体、背景图片...

语法：

选择器 {

CSS属性: 值1;

transition: 属性 持续时间;

}

选择器 {

CSS属性: 值2;

}

transition属性完整形式：transition: property duration timing-function delay;

分开写格式：

transition-property:属性

transition-duration:持续的时间

transition-timing-function:时间函数（linear\ease\ease-in-out）

transition-delay:延迟

提示：渐变动画只能提供的开始和结束两个点的状态样式，中间的过程由CSS补充——如位移：只能做直线位移。

3、兼容问题（由浏览器的渲染引擎不一样导致）

***各大浏览器前缀

-webkit- ：safari和Chrome和Opera

-moz-：Firefox火狐

-ms-：IE9

注意：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

***兼容各大浏览器的写法

-webkit-transform:skew(30deg);

-ms-transform:skew(30deg);

-o-transform:skew(30deg);

transform:skew(30deg);

知识扩展：主流浏览器内核

Trident：IE浏览器(遨游、世界之窗、腾讯TT...都是IE)

Gecko：FireFox

Presto：Opera，现在Opera也用成Webkit了

Webkit：Safari、Chrome

4.CSS高级属性——关键帧(keyframe)动画

关键帧动画：由程序员提供的一个动画过程中的若干个关键点的样式属性，每相邻的两个点中间的过渡效果由CSS补充——关键帧动画比Transition动画多了很多关键点。

使用方法：

步骤一：使用 @keyframes 声明动画的关键帧

@keyframes 动画名称 {

0% { }

xx% { }

100% { }

}

步骤二：在某个选择器中使用指定的关键帧动画

选择器 {

animation: 动画名称 持续时间;

}

动画属性：

animation: name duration timing-function delay;

动画子属性：

animation-name

animation-duration

animation-timing-function

animation-interact:infinite （循环)

animation-delay

康诺科技

2017/7/25