方法:1、利用transform屬性和rotate函數設定元素旋轉,語法為「transform:scale(角度);」;2、利用transform屬性和scale函數設定元素放大縮小,語法為「transform: scale(縮放倍數);」。
本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
css3怎麼旋轉放大縮小
在css中,可以利用transform屬性對元素旋轉放大和縮小。
當屬性與rotate函數配合使用時,可以設定元素進行旋轉操作,當transform屬性與scale函數配合使用是可以對元素進行放大縮小操作。
範例如下:
<html> <head> <style> .img1{ transform:rotate(45deg); } .img2{ transform:scale(0.5); } .img3{ transform:scale(1.545deg); } </style> </head> <body> <img src="1118.02.png" class="img1" alt="css3怎麼旋轉放大縮小" > <img src="1118.02.png" class="img2" alt="css3怎麼旋轉放大縮小" > <img src="1118.02.png" class="img3" alt="css3怎麼旋轉放大縮小" > </body> </html>
輸出結果:
#(學習影片分享:css影片教學)
以上是css3怎麼旋轉放大縮小的詳細內容。更多資訊請關注PHP中文網其他相關文章!