过度Transition与transform 转换

过度Transition
css的transition允许css的属性值在一定的时间区间内平滑的过渡
语法格式
transition：属性名 时间 速度曲线 何时开始
transition：width 2s ease-in 2s;


-webkit-transition:width 2s ease-in 3s; 
width 因为我们是为宽度写了hover后的值，所以如果这里写height属性是不会有过渡效果的
2s整个过渡效果持续的时间
ease-in 指定了过渡的动画效果
3s 过3秒后开始执行过渡效果


动画效果的可选值


linear 规定以相同的速度开始到结束（等于 cubic-bezier(0,0,1,1））。
ease   规定慢速开始，然后变快，最后慢速结束
ease-in 规定慢速开始
ease-out 规定慢速结束
ease-in-out 规定慢速开始和结束的效果
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。数值在0至1之间。


transform 转换
通常的属性包含了属性名和属性值，而css3的transform属性是用函数来定义的。


transform 2D 最常用到的函数是rotate（30deg)


书写格式
transform：rotate（30deg）;
通过rotate（）方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。它以deg为单位，代表了旋转的角度。
示例：
div{width: 30px;height: 25px;background: url("img/jt.png")no-repeat left top;
transition:background 1s linear }
div:hover{transform: rotate(180deg); }


transform3D相关函数
rotateX()
rotate的翻转，好比一张纸，在根据X轴水平的翻转


rotateY()
rotateY与rotate函数一样，只不过是通过Y轴垂直翻转。


translate3d(x,y,z)
此函数用来规定指定元素在三维空间的位移。它有三个值，x轴，y轴，z轴。
示例：
 <style>
     .d{width: 200px;height:300px;background: orange;margin: 100px;  position: relative;overflow: hidden;}
     .d2{width: 200px;height: 100px;background: red;position: absolute;bottom: -100px;}
     .d:hover{transform: translate3d(0px,-5px,0px);box-shadow: 0px 15px 15px gray;}
     .d:hover .d2{bottom: 0px;transition: .4s;}
 </style>


<div class="d">内容内容内容内容内容
      <div class="d2"></div>
</div>