ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を使用してページ上で画像を立体的にする方法 (コード テスト)

CSS を使用してページ上で画像を立体的にする方法 (コード テスト)

藏色散人
藏色散人オリジナル
2018-08-09 16:45:1011024ブラウズ

ウェブページに3次元の写真があると、常に人々にハイテク感を与えます。実際、立体感をデザインするのは難しくありません。CSS を使用することで立体感を実現できます。非常にシンプルで分かりやすいですが、まず立体感を強調するには左右の影を濃くし、中央を軽くする、というシンプルな考え方ができます。 CSS の影の 3 次元効果をここでは、::before、::after 疑似要素を使用して作成し、#Demo 要素 (z-index:-1) の後ろに配置し、影を設定し、回転を設定します。 。この記事ではCSS画像の立体感の実装について詳しく紹介します。

CSS 画像の 3 次元効果の具体的なコード例は次のとおりです:

<!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>

効果は次のとおりです:

CSS を使用してページ上で画像を立体的にする方法 (コード テスト)

関連する属性のメモ:

1. box-shadow

box-shadow : 5px 2px 6px #000 ;
値は左から右へ: シャドウの水平オフセット値 (右に正の値、左に負の値);値; 影の色。

2. transform
Transformには多くの効果がありますが、ここでは回転のみが使用されます:

transform:rotate(-3deg)
値は回転角度を表し、正の値は時計回り、負の値は反時計回りです。

この CSS 画像の 3 次元効果の紹介が皆様のお役に立てれば幸いです。


以上がCSS を使用してページ上で画像を立体的にする方法 (コード テスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。