CSS---transform

在我们页面中往往会出现鼠标移入或移出的动画，常见的有缩放，平移等等，他们大部分都是依赖css中的transform属性来实现的，下面是transform的几个取值的具体用法（研究的都是2D效果）

transform变换之translate位移

当实现鼠标移上移动位置时，使用该属性，单位为px

• translate()：指定对象的2D平移，
  • 第一个参数对应X轴，第二个参数对应Y轴。
  • 如果第二个参数未提供，默认值为0；
• translateX()：指定对象X轴的平移，即水平方向
• translateY()：指定对象Y轴的平移，即垂直方向

transform变换之scale缩放

想要实现鼠标移上图片放大缩小使用这个属性，没有单位

因为一般都是2D的效果，所以scale的取值有以下三种

• scale（x,y）：指的是该对象在2D时的缩放
  • 第一个参数对应X轴，第二个参数对应Y轴。
  • 如果第二个参数未提供，则默认取第一个参数的值；
• scaleX（）：指对象X轴（水平方向）的缩放
• scaleY（）：指对象Y轴（垂直方向）的缩放

注意，如果需要使缩放以后仍旧是原来的宽高，需要在他的父元素身上加一个overflow：hidden属性，这样既可以实现缩放的效果，又不会改变原来面积的大小

transform变换之rotate旋转

这个属性一般用在使用盒子模型的border属性写一个箭头，然后旋转到合适的角度。他的单位是deg

• rotate()：指定对象的2D旋转，需要transform-origin这个属性的定义，表示旋转一定的角度
• rotate()：顺时针旋转的度数
• rotate3d()：3d的旋转
• rotateX()：高会等比例的变小
• rotateY()：宽会等比例的变小
• rotateZ()：顺时针旋转的度数