CSS3 属性之transition过渡 与 transform动画示例代码

CSS3 提供了很多强大的功能，使开发人员可以创建更加吸引人的视觉效果，而不需要依赖于 JavaScript 或 Flash。其中，transition 和 transform 是两个常用的属性，它们分别用于创建平滑的过渡效果和元素的变形效果。下面我们将详细介绍这两个属性的使用方法并给出代码示例。

transition

transition 属性用于在一定的时间内平滑地改变一个元素从一个样式到另一个样式。你可以指定过渡的持续时间、延迟时间和过渡效果的速度曲线。

属性值：

• transition-property: 指定应用过渡的 CSS 属性名称，如 width, height, background-color 等。
• transition-duration: 指定过渡的持续时间，单位通常是秒（s）或毫秒（ms）。
• transition-timing-function: 定义过渡效果的速度曲线，如 linear, ease, ease-in, ease-out, ease-in-out 或 cubic-bezier(n,n,n,n)。
• transition-delay: 定义过渡开始前的延迟时间。

示例代码：

/* 过渡效果应用于宽度和背景颜色 */ div {   width: 100px;   background-color: red;   transition-property: width, background-color;   transition-duration: 2s;   transition-timing-function: ease-in-out;   transition-delay: 0.5s; } /* 鼠标悬停时改变宽度和背景颜色 */ div:hover {   width: 200px;   background-color: blue; }

transform

transform 属性允许你对元素进行旋转、缩放、倾斜或移动。这对于创建动态和吸引人的视觉效果非常有用。

属性值：

• rotate(): 旋转元素。你可以指定一个角度（deg）来确定旋转的程度。正值表示顺时针旋转，负值表示逆时针旋转。
• scale(): 缩放元素。你可以指定一个因子来确定缩放的程度。例如，scale(2) 将元素放大两倍，scale(0.5) 将元素缩小到原来的一半。
• translate(): 移动元素。你可以指定水平和垂直方向上的距离（px 或 %）来确定移动的程度。
• skew(): 倾斜元素。你可以指定一个角度（deg）来确定倾斜的程度。正值表示顺时针倾斜，负值表示逆时针倾斜。
• matrix(): 通过一个 2D 或 3D 转换矩阵来应用多个转换效果。

示例代码：

/* 创建一个可旋转、可缩放、可移动的元素 */ div {   width: 100px;   height: 100px;   background-color: red;   /* 旋转45度 */   transform: rotate(45deg);   /* 放大两倍 */   transform: scale(2);   /* 向右移动50px，向下移动20px */   transform: translate(50px, 20px); }

结合使用 transition 和 transform

你可以将 transition 和 transform 属性结合使用，以创建更加复杂的动画效果。例如，你可以使用 transition 来平滑地改变一个元素的 transform 值。

示例代码：

/* 元素初始状态 */ div {   width: 100px;   height: 100px;   background-color: red;   transform: rotate(0deg);   transition: transform 2s ease-in-out; } /* 鼠标悬停时旋转元素 */ div:hover {   transform: rotate(360deg); }

进阶学习

让我们继续深入这两个主题。

transition

除了上述的基本属性之外，transition还有一些其他的特性：

transition-property

除了常见的CSS属性（如width, height, background-color等）之外，transition-property还可以应用于一些更复杂的CSS属性，如border-radius, box-shadow, text-shadow等。此外，你还可以使用all关键字来对元素的所有属性应用过渡效果。

多个过渡效果

你可以在一个声明中指定多个过渡效果，只需用逗号将它们分开。例如：

transition: width 2s, height 3s, background-color 4s;

这将分别应用宽度、高度和背景颜色的过渡效果。

transform

同样，transform也有一些我可能没有提及的属性和特性：

transform-origin

transform-origin属性允许你改变元素变形的原点。例如，旋转一个元素时，你可以改变旋转的中心点。默认情况下，这个点是元素的中心点，但你可以将其移动到元素的任何其他位置。例如：

transform-origin: top left; /* 将变形原点移动到元素的左上角 */

3D 转换

除了2D转换之外，CSS3还支持3D转换，这允许你在Z轴上移动和旋转元素。这可以创建一些非常吸引人的3D视觉效果。例如：

transform: rotateX(45deg); /* 在X轴上旋转元素45度 */ transform: rotateY(45deg); /* 在Y轴上旋转元素45度 */ transform: translateZ(20px); /* 在Z轴上移动元素20px */

perspective 和 perspective-origin

当你使用3D转换时，你可能还希望改变观察者的视角。perspective属性允许你设置观察者和Z=0平面之间的距离，从而改变3D转换的视觉效果。perspective-origin属性允许你改变观察者的位置。例如：

perspective: 1000px; /* 设置观察者和Z=0平面之间的距离为1000px */ perspective-origin: top right; /* 将观察者移动到元素的右上角 */

transform-style

当你对父元素应用3D转换时，你可能希望子元素也保留其3D位置。默认情况下，子元素的3D位置会被平展到2D空间。transform-style属性允许你改变这种行为。例如：

transform-style: preserve-3d; /* 保留子元素的3D位置 */