CSS知识小点

                                     CSS变形
   开发工具与关键技术：DW               作者:133                  撰写时间：2019.3.29
   下面让我们在CSS3的基础上用transform 的4种简单的属性来了解一下CSS的形变，为我们以后用CSS3制造动画效果提供了基础。

1. 旋转：rotate(x)
   X为参数，度数为正数时围绕中心往顺时针方向旋转，度数为负数时则围绕中心往逆时针方向旋转 。(注：deg为旋转度数,是单位)
   写法和效果如下图
   
2. 扭曲skew()
   对象围绕着中心的X轴和Y轴的比例进行着扭曲，X和Y分别代表着水平方向扭曲和垂直方向扭曲，它还可以单单地对X轴或Y轴进行扭曲，skew（）的3种写法如下
   • transform:skew (X,Y); 代表元素同时在水平方向和垂直方向进行扭曲；
   • transform:skew X(n); n为参数, 代表元素只在水平方向(X轴)进行扭曲，
   • transform:skew Y(n); n为参数, 代表元素只在垂直方向(Y轴)进行扭曲；
   transform:skew(ndeg)；skew(n)默认为skewX(n), deg为扭曲度数,是单位
   演练如下图所示
   
3. 缩放scale()
   对象围绕着中心的X轴和Y轴的比例进行着缩放，X和Y分别代表着水平方向缩放和垂直方向缩放，它还可以单单地对X轴或Y轴进行缩放，scale（）的3种写法具体如下
   • transform: scale (X,Y); 代表元素同时在水平方向和垂直方向进行缩放。
   • transform: scale X(n); n为参数, 代表元素只在水平方向(X轴)进行缩放。
   • transform: scale Y (n); n为参数, 代表元素只在垂直方向(Y轴)进行缩放。
   transform: scale (ndeg)；如果没有设置X轴和Y轴，只有一个参数，这种写法默认为X轴和Y轴两个方向的缩放倍数是一样的，即等于scale (X,Y)，
   注意：（scale()的取值默认为1，当值设置为0.01< n > 0.99时，作用使元素缩小；而当值设置为大于1时，作用使元素放大。）
   演练如下图所示
   
4. 位移translate()
   将元素从原来的位置向指定的方向移动，而不影响在X、Y轴上的任何Web组件。
   translate()的3种写法具体如下
   • transform: translate (X,Y); 代表元素同时在水平方向和垂直方向进行位移。
   • transform: translate X(n); n为参数, 代表元素只在水平方向(X轴)进行位移，
   当n为正数时，元素水平方向往右移，为负数时水平方向往左移。
   • transform: translate Y (n); n为参数, 代表元素只在垂直方向(Y轴)进行位移，
   当n为正数时，元素垂直方向往下移，为负数时垂直方向往上移。
   transform: translate (n)；默认为translate X(n)。
   演练如下图所示

以上就是transform 简单的4种属性，旋转rotate(x)，扭曲skew()，缩放scale()，位移translate()。