CSS를 사용하여 이미지를 페이지에 3차원 효과로 만드는 방법은 무엇입니까?(코드 테스트)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 이미지를 페이지에 3차원 효과로 만드는 방법은 무엇입니까?(코드 테스트)

藏色散人

Aug 09, 2018 pm 04:45 PM

웹페이지에 3차원 사진이 있으면 항상 사람들에게 첨단 기술의 느낌을 줄 것입니다. 사실 입체 효과를 디자인하는 것은 어렵지 않습니다. CSS를 통해 입체 효과를 얻을 수 있습니다. 아주 간단하고 이해하기 쉽습니다. 우선 이런 간단한 생각을 할 수 있습니다. 입체감을 강조하기 위해서는 그림자를 좌우로 무겁게 하고 가운데를 밝게 해야 합니다. CSS 그림자 3차원 효과 여기서는 ::before,::after 의사 요소를 사용하여 #Demo 요소(z-index:-1) 뒤에 배치하고 그림자를 설정하고 회전을 설정합니다. . 이 기사에서는 CSS 이미지의 3차원 효과 구현에 대해 자세히 소개합니다.

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="/static/imghw/default1.png"  data-src="1.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="CSS를 사용하여 이미지를 페이지에 3차원 효과로 만드는 방법은 무엇입니까?(코드 테스트)" >
</div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS를 사용하여 이미지를 페이지에 3차원 효과로 만드는 방법은 무엇입니까?(코드 테스트)