css3变换-过渡-曲线-阴影(十九)

css3 transform 2D变换

transform: translate(20px,30px) rotate(30deg) scale(3,4) skew(20deg,30deg);
transform-origin: x-axis y-axis z-axis;

• 平移translate:从当前位置移动.

  transform: translate(50px,100px);
  

• 旋转rotate: 顺时针旋转元素,负值表示逆时针旋转.

  transform: rotate(30deg);
  

• 缩放scale: 该元素按照宽度和高度缩放,增加或者减小多少.

  transform: scale(2,3);
  

• 倾斜skew,默认是0,参数为负表示相反方向倾斜.(不常用)

  transform: skew(30deg,20deg);
  

css3 transition过渡

CSS3中,从一种样式转变到例外一种样式的时候,需要用到过渡.

transition: property duration timing-fuction delay;
     property 过渡的属性名称: width left等数值型  或 color颜色
     duration 过渡的需要的时间  s ms
     timing-fuction 过渡速度曲线  
     delay    延时时长   s  ms
    
  

timing-function 曲线属性

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	了解 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

示例:

.case {
  width: 100px;
  height: 20px;
  background-color: red;
  transition: .5s ease 1s;
}

.case:hover {
    width: 300PX;
    height:100px;
    background-color: blue;
}