老司机Studio 第三章

CSS3的进阶特性

• verticle-align

  • 垂直对齐方式
  • 只对容器内的inline-block元素起作用：图片，按钮，单复选框，单行/多行文本框等HTML控件
  • top, text-top, middle, bottom, text-bottom, baseline
    http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html

• flex

  
1
  
2
  
3
  
4

flex布局

- ie9开始支持
- display:flex;
- justify-content: 主轴对齐方式
- align-items: 副轴对齐方式
- order: 顺序
- wrap: 是否换行 默认不换
- flex-basis: 在还有剩余空间时的
- flex-grow:
- flex-shrink:

主轴对齐

副轴对齐

• transform

Hello

旋转

平移

缩放

skewX

skewY

• transform-origin

  • transform-origin:(left,top):

    
    
    

    transform-origin

  • transform-origin:(right):

    
    
    

    transform-origin

  • transform-origin:(25%,75%):

    
    
    

    image.png

 
  
 
    
Translate
 
    
TranslateX
 
    
TranslateY
 
    
Rotate
 
    
Scale
 
    
ScaleX
 
    
ScaleY
 
    
Skew
 
    
SkewX
 
    
SkewY
 
    
Matrix
 
  
 

3d

Hello

• transition动画

  
  
  

  transition

Hello

• animation动画

  
  
  

  animation

Hello