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


0
(0)

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

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

 

这篇文章有用吗?

平均评分 0 / 5. 投票数: 0

到目前为止还没有投票!成为第一位评论此文章。

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?