带你吃透CSS3属性：transition 与 transform

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

一：transition 过渡

1.1 transition-property 指定过渡属性

(资料图片仅供参考)


登录后复制

1.2 transition-duration 过渡时间


登录后复制

1.3 transition-delay 过渡延迟


登录后复制

1.4 transition-timing-function 过渡类型


登录后复制

1.5 过渡的连写形式


登录后复制

2.1 transform-origin 基点


登录后复制登录后复制


登录后复制

2.2 transform：translate 平移


登录后复制

2.3 transform：rotate 旋转


登录后复制登录后复制

2.4 transform：scale 放缩


登录后复制

3.1 不加透视的绕x轴旋转


登录后复制

3.2 加透视的绕x轴旋转


登录后复制

3.3 加透视的沿z轴平移


登录后复制

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

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

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