[分享]css3换位移怎么用

CSS3换位移是CSS3动画中非常基础而重要的一种动画效果。该效果可以让对象在页面上产生平移、缩放和旋转等动作。以下是CSS3换位移的用法：/ 平移效果 / transform: translate...

CSS3换位移是CSS3动画中非常基础而重要的一种动画效果。该效果可以让对象在页面上产生平移、缩放和旋转等动作。以下是CSS3换位移的用法：

/* 平移效果 */
	transform: translate(x, y);

	/* 缩放效果 */
	transform: scale(x, y);

	/* 旋转效果 */
	transform: rotate(deg); 

其中，x、y和deg分别是要平移的水平和垂直距离以及要旋转的度数。

例子1：使用CSS3平移效果

div{
		width: 200px;
		height: 200px;
		background: #333;
		transform: translate(50px, 50px);
	} 

上述代码中，将一个宽高为200px的div标签向右平移50px，向下平移50px。

例子2：使用CSS3缩放效果

div{
		width: 200px;
		height: 200px;
		background: #333;
		transform: scale(0.5, 0.5);
	} 

上述代码中，将一个宽高为200px的div标签宽度和高度都缩小了一半。

例子3：使用CSS3旋转效果

div{
		width: 200px;
		height: 200px;
		background: #333;
		transform: rotate(45deg);
	} 

上述代码中，将一个宽高为200px的div标签按照顺时针方向旋转45度。

总结：CSS3换位移是一种非常有用的动画效果，它可以很好地让网页中的对象产生动态效果，提高网页的视觉体验。