CSS transform(变形)和 transition(过渡)

啥也不说了,直接上代码:

transform用来设置变换、transition用来设置过渡,之前一直记得比较模糊,今天分清了,以前看的时候可能是混起来看的,今天是分开看,所以觉得很好理解。贝塞尔曲线表示时间和进度的关系,可以通过贝塞尔工具 预览效果。

变形是静态的是对元素外观的修改,过渡是动态效果,是当元素(指定或任意)样式发生变化是产生的过渡效果。

#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);
        }

 

Leave a Comment

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据