优秀程序员web前端技术之CSS3过渡transitioncss3过渡可以让CSS属性值在一定的时间间隔内平滑过渡。这个效果可以在鼠标点击、获得焦点、被点击、或者元素发生任何变化时触发，平滑的改变CSS属性值transition-property，带有动画效果：获取或设置其中涉及的transition-duration属性transitionintheobject:检索或设置对象的过渡的持续时间transition-delay:检索或设置对象的延迟过渡的时间transition-timing-function:检索或设置对象中的过渡的动画类型简写：transition:all/specificattributevaluemovementtimes/msDelaytimes/msAnimationtypetransition-timing-function:检索或设置对象中的过渡动画类型贝塞尔曲线：属性值：cubic-bezier()贝塞尔曲线URL：http://cubic-bezier.com/逐帧动画：transition-timing-function:steps（动画执行步数）；CSS32Dtransform变换属性包括：rotate()/skew()/scale()/translate(,)，以及x,y分别指向，如：rotatex()和rotatey()1.translate()将元素移动到指定位置方向，类似于位置上的相对。水平移动：向右平移(tx,0)，向左平移(-tx,0)；垂直运动：向上平移(0,-ty)和向下平移(0,ty)；对角线移动：右下角移动translate(tx,ty)，右上角移动translate(tx,-ty)，左上角移动translate(-tx,-ty)，translate(-tx,ty)在左下角。translateX()：水平移动对象。对象仅移动到X轴。如果值为正，则对象向右移动；如果值为负，则对象向左移动。translateY()：沿垂直轴移动对象。物体只向Y轴移动，如果值为正，物体向下移动；如果值为负，则对象向上移动。这两个函数与前面介绍的translate()函数的区别在于每个方法只接受一个值。所以transform:translate(-100px,0)实际上等于transform:translateX(-100px);transform:translate(0,-100px)实际上等于transform:translateY(-100px)。2.scale()允许元素根据中心原点缩放对象。默认值为1。因此0.01和0.99之间的任何值都会使元素变小；任何大于或等于1.01的值都会使元素显得更大。scale()函数的语法与translate()函数非常相似。它可以同时接受一个值或两个值。如果只有一个值，则默认情况下第二个值等于第一个值。例如，scale(1,1)不会改变元素，而scale(2,2)会使元素沿X轴和Y轴的大小增加一倍。scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）上对元素进行缩放，默认值为1。scaleY()：等同于scale(1,sy)。表示元素只在Y轴（垂直和水平方向）上对元素进行缩放，默认值为1。3.rotate()rotationrotate()函数指定元素根据原点进行二维旋转对象通过指定的角度参数。它主要在二维空间中运行，接受一个角度值来指定旋转的幅度。如果该值为正，则元素相对于原??点顺时针旋转；如果此值为负，则元素相对于原??点中心逆时针旋转。rotateX()方法以给定的角度围绕其X轴旋转元素。rotateY()方法以给定的角度围绕其Y轴旋转元素。它可以使物体以其中心位置绕X轴和Y轴按一定角度倾斜。一个参数：表示水平方向的倾角；两个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度transform-origintransform-origin为变换的原点，即元素围绕该点变换或旋转,此属性仅在设置了transform属性时有效；因为我们元素默认的基点是它的中心位置，换句话说，如果我们不使用transform-origin改变元素基点的位置，transform会进行旋转、平移、缩放、倾斜等操作都根据元素本身的中心位置进行更改。2D变换元素可以改变元素x和y轴
