H5C3 第三天 CSS3中2D和3D的使用

过渡(CSS3) transition

过度是css3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，

当元素从一种样式变换为另一种样式时为元素添加效果

transition: 要过渡的属性  花费时间  运动曲线  何时开始; 如果有多组属性变化，还是用逗号隔开。

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

     transition: 要过渡的属性  花费时间  运动曲线  何时开始; 
    transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
    transtion 过渡的意思  这句话写到div里面而不是 hover里面 
    transition: all 0.6s;   所有属性都变化用all 就可以了  后面俩个属性可以省略

2D变形(css3)transform

transform 是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放、甚至支持矩阵方式，配合过度和即将学习的的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

移动 translate(x, y)

使用translate方法来将文字或图像在水平方向和垂直方向上分别移动。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

缩放 scale(x, y)

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而 任何大于或等于1.01的值，作用是让元素放大

旋转 rotate(deg)   deg 度数

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

transform-origin可以调整元素转换变形的原点

名称	值	描述
x-axis	位置	（left、center、right）/ 百分数 / 数值 x 轴基点坐标
y-axis	位置	（top、center、bottom）/ 百分数 / 数值 y 轴基点坐标

倾斜 skew(deg, deg)

该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

• skew（30deg，0）：是表示只在X轴(方向)倾斜，逆时针旋转　

• skew（-30deg，0）：是表示只在X轴(方向)倾斜，顺时针旋转　　

• skew（0，30deg）：是表示只在Y轴(方向)倾斜，顺时针旋转　

• skew（0，-30deg）：是表示只在Y轴(方向)倾斜，逆时针旋转

• 1、skewX() ： 按给定的角度沿X轴指定斜切变换。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行。如：transform:skewX(30deg)

• 2、skewY() ： 按给定的角度沿Y轴指定斜切变换。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。如：transform:skewY（10deg）

3D变形(CSS3) transform

x左边是负的，右边是正的

y 上面是负的， 下面是正的

z 里面是负的， 外面是正的

左手法则也行：伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！为正顺时针旋转，为负，逆时针旋转

rotateX()    

rotateY()

rotateZ()

透视(perspective)

backface-visibility

值	描述
visible（默认）	背面是可见的。
hidden	背面是不可见的。

transform-style

transform-style: flat|preserve-3d;

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

translateX(x)

仅水平方向移动**（X轴移动）

translateY(y)

仅垂直方向移动（Y轴移动）

translateZ(z)

translate3d(x,y,z)

动画(CSS3) animation

 animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused;   暂停动画
animation-direction:alternate;(动画交替反向运行)

alternate-reverse;(动画反向交替运行)reverse(动画反向);