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。

 

 

 

猜你喜欢

转载自www.cnblogs.com/jiayouba/p/11827631.html