发表于2017-07-312019-01-01 作者 wind
啥也不说了，直接上代码：
transform用来设置变换、transition用来设置过渡，之前一直记得比较模糊，今天分清了，以前看的时候可能是混起来看的，今天是分开看，所以觉得很好理解。贝塞尔曲线表示时间和进度的关系，可以通过贝塞尔工具 预览效果。
变形是静态的是对元素外观的修改，过渡是动态效果，是当元素（指定或任意）样式发生变化是产生的过渡效果。
代码语言：javascript复制#a{
width:100px;
height:100px;
/*background:#f00;*/
transform: rotate(40deg) /*旋转，正数顺时针，负数逆时针*/ translate(-10px,-30px)/*位移*/ scale(2,1) /*缩放*/ skew(30deg,-50deg)/*翻转*/;
/*transform:*/
transform-style:preserve-3d ;
transform-origin:10% 20% /*转换原点，如果是3d的三个值*/;
transition:all 2s ease 1s /*过渡效果，property duration timing-function delay*/;
transition-timing-function:ease; /*单独设置过渡时间效果*/
transition-timing-function: cubic-bezier(0,1,0,1);
}
