CSS3属性：transition和transform

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Julylyna/article/details/82220148

一.定义

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);
		}