CSS3属性：transition和transform

最新推荐文章于 2026-05-09 15:22:56 发布

原创最新推荐文章于 2026-05-09 15:22:56 发布 · 931 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文为博主原创文章，未经博主允许不得转载。

收录于

css 同时被 2 个专栏收录

6 篇文章

订阅专栏

css3

1 篇文章

订阅专栏

博客介绍了CSS中transition和transform属性。transition是过渡属性的简写，包含过渡属性名称、时长、速度曲线和延迟等设置；transform用于对元素进行2D或3D转换。二者结合可做出过渡转换效果。

一.定义

1.transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property--规定设置过渡效果的 CSS 属性的名称
transition-duration--规定完成过渡效果需要多少秒或毫秒
transition-timing-function--规定速度效果的速度曲线
transition-delay--定义过渡效果何时开始

另外三个属性值无须过多解释，transition-timing-function的值如下所示：

2.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜（rotate()、scale()、translate()、skew()）。

由此可见，transition是过渡属性；transform重在2D/3D转换。

二.用法

transition和transform结合，可以做出过渡转换效果。

如下：

	<div class="outer">
		<div class="inner">
			<span>hello</span>
		</div>
	</div>


		.outer {
			width: 88px;
			height: 88px;
			line-height: 88px;
			text-align: center;
			border:1px solid #e5e5e5;
			border-radius:50%;
			padding:10px;
			transition:transform 3s ease-out;
		}
		.inner {
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, #f9be57 10%,#fde65b 100%); /*渐变背景色*/
			border-radius: 50%;
		}
		.inner span {color:#fff;}
		.outer:hover {
			transform: rotate(360deg);
			transform: scale(2);
			transform: translate(0,-10px);
			transform: skew(45deg);
		}