过渡与2D变换

0808

Transition过渡

transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property ：规定设置过渡效果的 CSS 属性的名称（all || [attr] || none）
transition-duration ：运动时间
transition-delay :延迟时间
transition-timing-function :运动形式

• ease：（逐渐变慢）默认值

• linear：（匀速）

• ease-in：(加速)

• ease-out：（减速）

• ease-in-out：（先加速后减速）

• cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

复合样式：

transition:top 2s 1s,left 5s 1s;

2D变换

transform

1.rotate(90deg) 旋转函数 取值度数

• deg 度数
• Transform-origin:x y 旋转的基点

2.skew(90deg) 倾斜函数 取值度数

• skewX()
• skewY()

scale(2) 缩放函数 取值 正数、负数和小数

• scaleX()
• scaleY()

translate() 位移函数

• translateX()
• translateY()

Transform 执行顺序问题 — 后写先执行

复合样式注意的点
translate(200px,200px) 位移最好写在最前面

.box{
            width:100px;
            height:100px;
            background-color: #fff;
            margin:100px;
            transform:translate(200px,200px) scale(1.4) rotate(45deg);
        }