CSS3圖片旋轉效果
本章節分享一段程式碼例項,它實現了使用css3控制圖片360度旋轉滾動效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> img { position: absolute; left: 150px; top: 30px; width: 200px; height: 200px; transform: rotate(0deg); transition: transform 1s linear; } img:hover { transform: rotate(360deg); } </style> </head> <body> <img src="demo/CSS/img/girl.jpg" alt="螞蟻部落"> </body> </html>
滑鼠懸浮圖片,可以進行360旋轉效果。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼img { position: absolute; left: 150px; top: 30px; width: 200px; height: 200px; transform: rotate(0deg); transition: transform 1s linear; }
通過絕對定位設定圖片的位置、尺寸和初始旋轉角度。
最後在利用過渡方式設定transform變換。
[CSS] 純文字檢視 複製程式碼img:hover {; transform: rotate(360deg); }
當滑鼠懸浮時,重置旋轉角度,這個重置過程是動畫方式過渡的。
二.相關閱讀:
(1).絕對定位參閱CSS position:absolute 絕對定位一章節。
(2).transform參閱CSS3 transform一章節。
(3).transition參閱CSS3 transition一章節。
(4).:hover參閱CSS E:hover偽類選擇器一章節。
相關文章
- jQuery圖片放大和旋轉效果jQuery
- js控制專輯圖片旋轉效果JS
- CSS3 旋轉魔方效果CSSS3
- CSS3多面體旋轉效果CSSS3
- CSS3星系旋轉效果代CSSS3
- CSS3旋轉載入等待效果CSSS3
- CSS3 圓環內部旋轉效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- CSS3滑鼠懸浮div旋轉效果CSSS3
- css3實現環狀旋轉效果CSSS3
- CSS3旋轉風車效果程式碼CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3 3d旋轉魔方效果CSSS33D
- CSS3 太陽系星球旋轉效果CSSS3
- javascript仿新浪微博圖片放大縮小及旋轉效果JavaScript
- html中圖片旋轉HTML
- CSS3圖片拉近放大效果CSSS3
- 將圖片旋轉(這裡不是旋轉imageView)View
- canvas旋轉太極圖效果Canvas
- CSS3旋轉大風車效果詳解CSSS3
- CSS3扇形旋轉效果詳解CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- css3點狀旋轉載入等待效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- CSS3圓形旋轉變大動畫效果CSSS3動畫
- css3實現的立方體旋轉效果CSSS3
- CSS3花瓣狀360度不停旋轉效果CSSS3
- 簡單的css3頭像旋轉與3D旋轉效果CSSS33D
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- 怎麼旋轉圖片?BenVista PhotoZoom Pro旋轉圖片的方法OOM
- 圖片操作系列 —(2)手勢旋轉圖片
- php實現圖片旋轉PHP
- CSS3立方體3D旋轉效果CSSS33D
- CSS3 螺旋旋轉黑白相間條紋效果CSSS3
- CSS3實現的3D旋轉效果CSSS33D
- css3實現的旋轉載入等待效果CSSS3
- 直播app系統原始碼,圖片Loading旋轉動畫效果APP原始碼動畫
- 直播軟體原始碼,CSS3實現圖片立體旋轉動畫原始碼CSSS3動畫