CSS教程--动画

目录

一．２Ｄ转换

１.ｔｒａｎｓｌａｔｅ（）平移操作

２.ｒｏｔａｔｅ（）　旋转操作

３.ｓｃａｌｅ（）　放大缩小操作

３.１.ｓｃａｌｅＸ（）　

３.２.ｓｃａｌｅＹ（）　

４.ｓｋｅｗ（）　倾斜操作

二．３Ｄ变换

１.ｒｏｔａｔｅＸ（）　

２.ｒｏｔａｔｅＹ（）　

３.ｒｏｔａｔｅＺ（）　

三．ＣＳＳ过渡

１.ｔｒａｎｓｉｔｉｏｎ　属性

２.ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ　属性

３.ｔｒａｎｓｉｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ　属性

４.ｔｒａｎｓｉｔｉｏｎ－ ｐｒｏｐｅｒｔｙ　属性和ｔｒａｎｓｉｔｉｏｎ－ｄｕｒａｔｉｏｎ属性

四．ＣＳＳ动画

---

一．２Ｄ转换

ＣＳＳ中的２Ｄ转换顾名思义就是在平面内对元素或标签进行二维变换，通过ｔｒａｎｆｏｒｍ属性可以对元素进行平移，旋转，放大缩小和倾斜等操作，如下是这几种变换的方法：

• ｔｒａｎｓｌａｔｅ
• ｒｏｔｕｔｅ
• ｓｃａｌｅ
• ｓｋｅｗ

---

１.ｔｒａｎｓｌａｔｅ（）平移操作

        ｔｒａｎｓｌａｔｅ方法有两个参数，对应Ｘ轴Ｙ轴，也就是该元素要移动到位置

例如：将一个ｄｉｖ标签沿ｘ移动５０ｐｘ，沿ｙ移动１００ｐｘ

．ｄｉｖ｛
ｗｉｄｔｈ：３０ｐｘ；
ｈｅｉｇｈｔ：５０ｐｘ；
ｔｒａｎｓｆｏｒｍ：ｔｒａｎｓｌａｔｅ（５０ｐｘ，１００ｐｘ）
｝

---

２.ｒｏｔａｔｅ（）　旋转操作

        给ｒｏｔａｔｅ（）方法传入一个角度时可以实现旋转操作，旋转的方向取决于传入角度的正负，正角度顺时针旋转，负角度逆时针旋转

例如：将一个ｄｉｖ标签顺时针旋转２０度

 div{
            width: 60px;
            height:80px;
            background-color: chartreuse;
            border-radius:20%;
            transform: rotate(20deg);
        }

---

３.ｓｃａｌｅ（）　放大缩小操作

        ｓｃａｌｅ（）方法传入两个数值分别表示宽度和高度变换的倍数，数值对于１表示放大，小数表示缩小，当然，负数是没有意义的

例如：将一个ｄｉｖ标签宽放大２倍，高放大３倍

  div{
            width: 60px;
            height:80px;
            background-color: chartreuse;
            position: fixed;
            border-radius:20%;
            transform: scale(2,3) translate(50px,100px);
        }

---

３.１.ｓｃａｌｅＸ（）　

        ｓｃａｌｅＸ（）方法和ｃｓａｌｅ（）方法一样，但ｓｃａｌｅＸ（）只对元素宽度进行改变

---

３.２.ｓｃａｌｅＹ（）　

        不用说，都懂

---

４.ｓｋｅｗ（）　倾斜操作

        ｓｋｅｗ（）方法传入两个角度参数，实现沿Ｘ，Ｙ轴对元素的倾斜，注意倾斜和旋转不一样

例如：沿Ｘ轴倾斜ｄｉｖ标签２０度，Ｙ轴３０度

 div{
            width: 60px;
            height:80px;
            background-color: chartreuse;