CSS3 2D效果

2D变换

• transform

  • rotate()旋转函数 取值函数
  • deg 度数
  • transform-origin: 旋转的基点(left,top,等等)

• skew()倾斜函数 取值函数

  • skewX() 横轴斜切
  • skewY() 纵轴斜切

• scale() 缩放函数取值，正数，负数和小数

• scaleX() 横轴缩放

• scaleY() 纵轴缩放

• translate()位移函数

  • translateX() 横轴移动
  • translateY() 纵轴移动

旋转

效果图如下:

旋转.gif

斜切

效果图如下

斜切.gif

放到或者缩小

    
    
    




      ![](images/Rect.jpg)

效果

放大或者缩小.gif

斜线导航效果

    
    
    




    
导航一
    
导航二
    
导航三
    
导航四
    
导航五

斜线导航

斜线导航.gif

位移就是位置移动

    
    
    




    
导航一
    
导航二
    
导航三
    
导航四
    
导航五

效果图:

位移.gif

这里特别注意的是transform执行顺序问题，后写的先执行

    
    
    




box1
box2

效果图

transform执行顺序.gif

• 从上图明显可以看出来BOX2要比BOX1走的更远
• 因为BOX2先执行的就是scale缩小然后在执行的移动。移动的距离没有变化
• 而BOX1先执行的是移动在执行的缩小，这样移动的距离也在缩小。所以发生了变化