css学习12

1.对于设置了flex盒模型。

可以使用下面的属性：

order：控制里面的标签的排列顺序

flex就是下面三个属性的集合。

flex-grow:决定容器中元素将剩余空间按照比例拓展空间

flex-shrink:和flex-grow相反

flex-basis:设置伸缩基准值，剩余空间按照比率进行伸缩。

 

flex-flow是flex-wrap  flex-direction的复合属性。

 

2.css3的动画分为Transition和Animation两种。

Transition是支持属性从一个值平滑过渡到另一个值，从而产生渐变的动态效果。

Animation是支持关键帧产生序列渐变动画。

 

3.2d动画

transform:rotate(-90deg)  旋转

transform:scale(1.5)  如果为负值，那么就反转元素

transform:translate(4px,4px) 

transform:skew(30deg,-10deg) 第一个参数是按照x轴旋转 第二个参数是y轴旋转。

transform:matrix(.....)

 

上面的形式可以简写为transform:rotate(-90deg) scale(1.5) translate(4px,4px) ；

 

transform-origin:20%  20% 定义变换原点。

 

4.3d变换（浏览器支持并不是很好）

使用时候要创建三维空间

transform-style:preserve-3d

translateZ()   tanslate3d()

rotateX()  rotateY()  rotateZ()  rotate3d()

scaleZ()  scale3d()

matrix3d()

 

5.设置过渡属性

 

6.设计帧动画