CSS3中transform移动属性的使用

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Mr_li13/article/details/50750358

问题?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的作用。当然联合过渡属性来做,效果相对好一点儿。
展开阅读全文

没有更多推荐了,返回首页