
在CSS3动画学习中,平移、缩放、倾斜、旋转等变形操作为实现动态效果提供了强大工具。首先,平移使用translate()函数,其语法形式为translate(x, y)。x值和y值范围在0到1时,表示元素缩小;当x值或y值大于1时,元素放大。
接着是倾斜,通过skew(x, y)函数实现,其中x和y值以deg为单位。正数表示逆时针倾斜,负数表示顺时针倾斜。
旋转则使用rotate(degree)函数,degree表示元素相对于中心原点旋转的角度,顺时针为正,逆时针为负。
变形操作的中心原点由transform-origin属性控制,默认位于元素宽度和高度的50%。此属性允许通过长度值(如px、em)或关键字自定义中心点。
动画过渡通过transition属性实现,它使元素属性从一个值平滑过渡到另一个值,创造动画效果。此属性包含四个关键子属性:transition-property(指定过渡属性)、transition-duration(持续时间)、transition-timing-function(过渡效果的曲线)和transition-delay(延迟时间)。
transition-delay的单位为秒,缺省值为0s。过渡效果常与:hover伪类结合,以便在元素状态改变时触发。在普通状态内加入transition属性,移出时会显示过渡效果;反之,若仅在悬浮状态内设置,移出时则不会展现过渡效果。