溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css怎么實現圖片旋轉、傾斜、位移以及平滑”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css怎么實現圖片旋轉、傾斜、位移以及平滑”吧！
在開發中，我們常常需要對圖片有一些絢麗的效果，比如是圖片旋轉，平移，傾斜等。
<!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>感謝各位的閱讀，以上就是“css怎么實現圖片旋轉、傾斜、位移以及平滑”的內容了，經過本文的學習后，相信大家對css怎么實現圖片旋轉、傾斜、位移以及平滑這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
