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