生活随笔
收集整理的這篇文章主要介紹了
css 中图片旋转,倾斜,位移,平滑
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在開發中，我們常常需要對圖片有一些絢麗的效果，比如是圖片旋轉，平移，傾斜等。其實這些在css3中都已經存在，整理下作為demo，以后參考使用，也希望供大家交流學習。如果不足，多多指導。
<!DOCTYPE?html>
<html><head><meta?charset="UTF-8"><title>圖片效果</title><style?type="text/css">*{padding:?0px;margin:?0px;}#imgs{width:?300px;height:?300px;position:?absolute;top:?100px;left:?100px;background-color:red;/*?這里是背景圖片,如果沒有圖片,上面設置了背景顏色為紅色,也是可以演示效果的????*/background-p_w_picpath:?url("p_w_picpath/bg.jpg");/*?rotate(30deg)?:?旋轉圖片角度?,30表示旋轉度數,當然也可以是負數，表示逆時針旋轉?scale(0.5)?:?表示圖片放大的倍數,可以是整數,也可以是小數,當然也可以是負數,表示當前圖片旋轉180時候的效果translate(10px,20px)?:?表示圖片的位移,10px?表示水平位移,20表示垂直位移skew(20deg,30deg)?：?表示圖片傾斜,20deg?表示水平傾斜,30deg表示垂直傾斜*/transform:rotate(0deg)?scale(1)?translate(10px,20px)?skew(20deg,30deg);}/*?鼠標放在圖片上顯示的效果??*/#imgs:HOVER?{/*transition?:?transform?表示旋轉的屬性,如果這里還有其他的屬性,比如背景圖片,這里只需寫成all就可以2s?表示時間???ease?:表示勻速旋轉ease-in:表示先快后慢ease-out：表示先慢后快*/transform:rotate(30deg)?scale(1.5);transition:transform?2s?ease;}</style></head><body><div?id="imgs"></div></body>
</html>
轉載于:https://blog.51cto.com/zhuws/1914730
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的css 中图片旋转,倾斜,位移,平滑的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
