1. 程式人生 > >CSS3中transform使用rotate和translete可以製作很多有趣的動作

CSS3中transform使用rotate和translete可以製作很多有趣的動作

.father {
			width: 300px;
			margin: 100px auto;
			position: relative;
			border: 1px solid skyblue;
			/*overflow: hidden;*/
		}
		.son {
			height: 300px;
			width: 300px;
			transition: all 2s;
		}
		.son:hover {
			transform: scale(1.1,1.1);
		}
		.section {
			height: 300px;
			width: 300px;
			transition: all 12s;
			background-color: pink;
		}
		.section:active {
			/*transform: translate(400px,200px); 移動變形*/
			transform: rotate(2960deg);   /*旋轉變形*/

例如這樣使用兩個DIV做出的放大同時出現旋轉效果,增加使用者互動體驗性。 但需要注意的是如果在transform中同時指定rotate和translete屬性值時,會層疊只顯示一種效果。