css3变形效果

---

CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。

属性有两个：transform 和 transform-origin。

transform                指定应用的变换功能

transform-origin      指定变换的起点

transform 的属性值：

none                           无变换

translate(长度值或百分数值)

translateX(长度值或百分数值)          在水平方向、垂直方向或两个方向上平移元素。

translatY(长度值或百分数值)        

scale(数值)

scaleX(数值)                在水平方向、垂直方向或两个方向上缩放元素

scaleY(数值)

rotate(角度)                旋转元素

skew(角度)

skewX(角度)              在水平方向、垂直方向或两个方向上使元素倾斜一定的角度�

skewY(角度)

---

transform: translate(200px,200px);    //向水平和垂直各移动 200 像素，也可以使用百分比

transform: scale(1.5,1.5);      //水平、垂直方向放大 1.5 倍

transform: rotate(-45deg);      //旋转元素，0 ~ 360 度之间，负值均可

transform: skew(45deg, 20deg);    //倾斜元素，0 ~ 360 度之间，负值均可

---

transform-origin 属性值

---

left

center                    指定x 轴的位置

right

top

center                  指定y 轴的位置

bottom

百分数值        指定元素x 轴或 y 轴的起点

长度值            指定距离

     这个属性是用来改变变形的基准点的，默认是在元素的中心位置，如果你改变了基准点。

它就会按照这个基准点进行变形。

---

//默认值，以中心点变形

transform-origin: center center;

transform-origin: 50% 50%;

---

//以左上角为基准点变形

transform-origin: left top;

transform-origin: 0px 0px;