14、CSS变换、过渡与动画属性全解析

CSS变换、过渡与动画属性全解析

在网页设计中，为了实现更加丰富和动态的视觉效果，CSS提供了多种强大的功能，包括变换（Transforms）、过渡（Transitions）和动画属性。下面将详细介绍这些功能。

2D变换函数

2D变换函数可以对元素进行旋转、缩放、倾斜和平移等操作，为网页元素增添动态和独特的视觉效果。

rotate()

rotate() 函数用于旋转元素。可以通过指定角度值来控制旋转的方向和程度。正值表示顺时针旋转，负值表示逆时针旋转。

.parent div:nth-of-type(1) {
    transform: rotate(5deg);
}

.parent div:nth-of-type(2) {
    transform: rotate(-45deg);
}

.parent div:nth-of-type(3) {
    transform: rotate(180deg);
}

上述代码展示了如何对 .parent 元素下的不同 div 元素应用不同角度的旋转。

scale()

scale() 函数用于缩放元素及其内容。它在元素渲染完成后生效，子元素会随着父元素一起缩放，而不是根据父元素的大小重新布局。

scale() 函数接受一个乘数作为参数。例如，值为 0.5