在頁面中怎麼用css讓圖片有立體感的效果?（程式碼實測）
- 藏色散人原創
- 2018-08-09 16:45:1011071瀏覽
網頁上如果出現立體感的圖片，總是會讓人有種高科技的感覺。其實立體感的設計並不難，我們可以透過css來實現立體感的效果。非常簡單易懂，首先我們可以有這樣的簡單思路，為了突顯立體感，要讓陰影左右重中間輕，也就是css陰影立體效果，這裡使用了::before,::after偽元素，創建並讓它們定位在#Demo元素後(z-index:-1)，同時設定陰影，並設定旋轉。本篇文章就給大家詳細介紹css圖片立體效果的實現。
css圖片立體效果具體程式碼範例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css立体感测试</title>
<style>
#demo{ display:inline-block; position:relative; margin:50px; padding:20px; background:#fafafa; box-shadow:0 0 3px rgba(0, 0, 0, 0.2); -moz-border-radius:4px; border-radius:4px; color:rgba(0,0,0, 0.8); text-shadow:0 1px 0 #fff;}
#demo::before, #demo::after{ position:absolute; content:""; top:10px; bottom:15px; left:10px; width:50%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); -ms-transform:rotate(-3deg); transform:rotate(-3deg); z-index:-1;}
#demo::after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); -ms-transform:rotate(3deg); transform: rotate(3deg);}
#demo img{ vertical-align:bottom;}
</style>
</head>
<body>
<div id="demo">
<img src="1.png" style="max-width:90%" style="max-width:90%" / alt="在頁面中怎麼用css讓圖片有立體感的效果?（程式碼實測）" >
</div>
</body>
</html>效果如下圖：
一、box-shadow
box-shadow:5px 2px 6px #000;數值從左到右：陰影水平偏移值（正值向右，負值向左）；陰影垂直偏移值（正值向下，負值向上）；陰影模糊值；陰影顏色。
transformtransform的效果很多，這裡只用了旋轉：
數值表示旋轉的角度，正值為順時針，負值為逆時針。
以上是在頁面中怎麼用css讓圖片有立體感的效果?（程式碼實測）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn