带你吃透CSS3属性：transition 与 transform

本篇文章带大家了解下CSS 中的 transition (过渡) 和 transform (动画) 属性，这两个属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。

一：transition 过渡

---

1.1 transition-property 指定过渡属性

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 156, 156);
            transition-property: width,height;  //设置要过渡的属性为宽高
        }
        div:hover{
            width: 300px;
            height: 300px;
        }
</style>

登录后复制

---

1.2 transition-duration 过渡时间

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 156, 156);
            transition-property: width,height;
            transition-duration: 3s,1s;
        }
        div:hover{
            width: 300px;
            height: 300px;
        }
    </style>

登录后复制

---

1.3 transition-delay 过渡延迟

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 156, 156);
            transition-property: width,height;
            transition-duration: 3s;
            transition-delay: 2s;
        }
        div:hover{
            width: 300px;
            height: 300px;
        }
    </style>

登录后复制

---

1.4 transition-timing-function 过渡类型

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 156, 156);
            transition-property: width,height;
            transition-duration: 3s;
            transition-timing-function: ease-in;
        }
        div:hover{
            width: 300px;
            height: 300px;
        }
    </style>

登录后复制

---

1.5 过渡的连写形式

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            transition: all 2s linear;
        }
        div:hover{
            width: 300px;
            height: 300px;
        }
    </style>

登录后复制

---

二：transform 2D动画效果

---

2.1 transform-origin 基点

2.1.1 默认的基点

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            margin: 100px auto;
            transition: all 2s linear;
        }
        div:hover{
            transform: rotateZ(90deg);
        }
    </style>

登录后复制

登录后复制

---

2.1.2 设置后的基点

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            margin: 100px auto;
            transition: all 2s linear;
            transform-origin: left bottom;
        }
        div:hover{
            transform: rotateZ(90deg);
        }
    </style>

登录后复制

---

2.2 transform：translate 平移

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            transition: all 2s linear;
        }
        div:hover{
            transform:translate(200px,200px)
        }
    </style>

登录后复制

---

2.3 transform：rotate 旋转

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            margin: 100px auto;
            transition: all 2s linear;
        }
        div:hover{
            transform: rotateZ(90deg);
        }
    </style>

登录后复制

登录后复制

---

2.4 transform：scale 放缩

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            transition: all 2s linear;
            margin: 100px auto;
            transform-origin: top left;
        }
        div:hover{
            transform:scale(2)
        }
    </style>

登录后复制

---

三：transform 3D动画效果

3.1 不加透视的绕x轴旋转

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            transition: all 2s linear;
            margin: 100px auto;
        }
        div:hover{
            transform:rotateX(360deg)
        }
    </style>

登录后复制

---

3.2 加透视的绕x轴旋转

    <style>
        body{
            perspective: 500px;  //透视
        }
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            transition: all 2s linear;
            margin: 100px auto;
        }
        div:hover{
            transform:rotateX(360deg)
        }
    </style>

登录后复制

---

3.3 加透视的沿z轴平移

    <style>
        body{
            perspective: 500px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            transition: all 2s linear;
            margin: 100px auto;
        }
        div:hover{
            transform:translateZ(200px)
        }
    </style>

登录后复制

---

3.4 重要属性：是否开启3D效果呈现

更多编程相关知识，请访问：编程视频！！

以上就是带你吃透CSS3属性：transition 与 transform的详细内容，更多请关注Work网其它相关文章！