transform和transition的常用取值 CSS3骚样式之一

CSS3骚样式之一

　　利用transform改变元素样式，旋转，缩放，移动，倾斜等，再结合animation添加更多效果，最后以动画的方式展示，可以做出很多令人眼前一亮的页面效果，

多数情况下，同样的页面内容，适当的加入一些炫酷效果，总是能加分的！所以学好这两个属性，相当重要。

一、transform

　　改变元素样式，旋转，缩放，移动，倾斜等，不会影响到其他元素的位置(不包括覆盖)。

1、偏移量（移动元素）

　　translate(x,y)，定义 2D 转换；
　　translate3d(x,y,z)，定义 3D 转换；

　　也可以单独使用一个方向的值：translateX(x)、translateY(y)、translateZ(z)。

　　注：X轴取值移动，正右负左；Y轴取值移动，正上负下；Z轴取值移动，正出负进。

2、旋转（默认值为Z轴）

　　rotate(angle)，定义 2D 旋转；

　　rotate3d(x,y,z,angle)，定义 3D 旋转；

　　也可以单独使用一个方向的值：rotateX(angle)、rotateY(angle)、rotateZ(angle)。

　　注：angle，角度（45deg或-45deg）,正值顺时针旋转，负值逆时针旋转。

3、倾斜（会改变形状）

　　skew(x-angle,y-angle)，定义沿着 X 和 Y 轴的 2D 倾斜转换；

　　　　skewX(angle)、skewY(angle)。

　　注：有点难以形容...谁用谁知道哦！~

4、大小变化（1为原本大小）

　　scale(x,y)，定义 2D 缩放转换；

　　scale3d(x,y,z)，定义 3D 缩放转换；

　　也可以单独使用一个方向的值：scaleX(x)、scaleY(y)、scaleZ(z)。

　　注：小于1缩小，大于1放大，一般使用就给一个值：scale(2)，放大一倍；给多值变化有点走样...谁用谁知道哈！~

　　注注：讲道理，我没有试过给负值！

　　缩写方式：transform:scale(0.8) rtate(45deg) skew(45deg) translate(12px,20px);（两个或几个一起）。

二、transition

　　transition，过渡，元素从一种样式逐渐改变为另一种的效果，当鼠标hover时改变 ，当指针移出元素时，逐渐变回原来的样式，变化会影响到其他元素（直接挤开）。

　　因为改变会影响其他元素位置，所以必须要特定的地方才好使，感觉用的比transform少，但是同样也骚，特殊情况会有奇效。

1、transition-property

　　规定应用过渡的 CSS 属性的名称，默认为all,可以是单独的：width或height；也可以是几个一起的列表，列表以逗号分隔。

　　注：支持transition的属性都可以设置数字属性值。

2、transition-duration

　　定义过渡效果花费的时间，默认是 0。

　　注：transition-duration必须给值，否则持续时间为0，transition不会有任何效果。

3、transition-timing-function

　　规定过渡效果的时间曲线。默认是 "ease"。

linear	动画从头到尾的速度是相同的
ease	默认值，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

4、transition-delay

　　规定在过渡效果开始之前需要等待的时间，以秒或毫秒计，默认为0。