CSS3中transform使用rotate和translete可以製作很多有趣的動作
阿新 • • 發佈:2018-12-13
.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屬性值時,會層疊只顯示一種效果。