css3转换

Css3转换

一、概括

1、通过css3转换可以实现对元素的移动、缩放、转动、拉伸或拉长的操作。

2、转换的定义：改变位置、形状、尺寸。分两种2D转换和3D转换（空间转换）

3、浏览器支持：IE、火狐、欧朋（仅支持2D转换）、谷歌和Safari要加内核前缀-webkit-。

二、transform

1、Transform属性：（2D转换，3D转换）      

1-1、2D转换：只能在x轴y轴上进行操作；

常见值：

none（默认值，不进行转换）

transform-function：（转换函数）

1-2、写法如下

              transform：translate（x px，y px）平移，

       transform：rotate（angel  deg）旋转，angel值可正（顺时针）可负（逆时针）

              transform：scale（n，n）改变元素的尺寸，根据x轴和y轴的值即宽或高来改变元素放大或缩小(0~1表示缩小)的倍数

              transform：skew（x deg，y deg）翻转倾斜，围绕x轴翻转x度，围绕y轴翻转y度

              transform：matrix（）把所有的2D转换的方法组合在一起。

              Transform-origin（）允许你改变转换元素的位置,默认情况下转换原点是在元素的中心点或者是x轴和y轴的50%处，   值有三种形式：数值/百分比/关键字；

 

       2、3D转换：transform-style() 

值：①flat（默认值）表示所有子元素在2D平面呈现。

②perserve-3D表示所有的子元素在3D空间中呈现

              perspective属性（中文意思是：透视，视角）单位以像素计；

语法：perspective: number|none;其中（none为默认值）

            perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。

 

三、过渡

1、什么是过度transition？

       添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

    1、能够在一定的时间内使css属性平滑的变化

    2、需要触发

2、常用的属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

 

       1、主要包含：transition-property：none、all、intent

       2、transition-duration 定义过渡花费的时间，默认是0

       3、transition-timing-function 规定过度效果的时间曲线，默认是“ease”先慢后快     其他值：linear匀速、                                                         

       ease-in以慢速开始、ease-out以慢速结束、ease-in-out以慢速开始和结束。

       4、transition-delay：设置出发后何时开始执行

       5、缩写：transition：: property duration timing-function delay;

 

多个样式加过渡效果

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

 

四、动画

关键帧：@keyframes

 

animation与transition的区别：相同点都可以改变css属性；不同点动画不用触发。

 

动画常用属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode	规定对象动画时间之外的状态。