CSS3中transform移动属性的使用

CSS3 transform移动属性详解及应用示例

最新推荐文章于 2025-07-22 12:55:01 发布

原创最新推荐文章于 2025-07-22 12:55:01 发布 · 1.5w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #transform #css3移动属性

--------《CSS》专栏收录该内容

3 篇文章

订阅专栏

本文深入解析CSS3中transform移动属性的工作原理，通过实例展示如何利用此属性实现元素的位置变化，包括旋转、缩放、移动和倾斜等效果，并探讨了结合transition属性提升动画效果的方法。

问题？CSS3中transform移动属性的使用

原理：该属性是将原来存在的元素发生位置的变化，包括旋转角度，水平，垂直位置的变化。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

例子：

		#div1{
			width: 200px;
			height: 200px;
			background-color: blue;
			/* transition css3属性，表示的是过渡 ，表示一个元素的样式，变成另外一个样式，有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的，延迟0s开始*/
			transition: all 2s ease 0s;
		}
		 #div1:hover{
			background-color: green;
			width: 0px;
			height: 0px;
			border-radius: 50%;
			box-shadow: 2px 2px 2px black; 
			/*transform:旋转属性(度数)
			translateX:移动属性*/
			transform: rotate(30deg) translateX(500px) translateY(50px);
		}

由上例可以看出，transform的作用。当然联合过渡属性来做，效果相对好一点儿。