Home > Article > Web Front-end > How to use css to make images have a three-dimensional effect on the page? (code test)

How to use css to make images have a three-dimensional effect on the page? (code test)

藏色散人Original: 2018-08-09 16:45:1011031browse

If there are three-dimensional pictures on the web page, it will always give people a high-tech feeling. In fact, it is not difficult to design a three-dimensional effect. We can achieve the three-dimensional effect through CSS. It is very simple and easy to understand. First of all, we can have this simple idea. In order to highlight the three-dimensional effect, we need to make the shadow heavy on the left and right and light in the middle, which is the CSS shadow three-dimensional effect. Here we use the ::before,::after pseudo-elements to create and let They are positioned behind the #Demo element (z-index:-1), set a shadow, and set rotation. This article will give you a detailed introduction to the implementation of the three-dimensional effect of CSS images.

The specific code example for css image three-dimensional effect is as follows:

<!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="How to use css to make images have a three-dimensional effect on the page? (code test)" >
</div>
</body>
</html>

The effect is as follows:

How to use css to make images have a three-dimensional effect on the page? (code test)

Related attribute notes:

1. box-shadow

box-shadow:5px 2px 6px #000;
Value from left to right: shadow horizontal offset Value (positive values go to the right, negative values go to the left); shadow vertical offset value (positive values go down, negative values go up); shadow blur value; shadow color.

2. transform
Transform has many effects, here only rotation is used:

transform: rotate(-3deg)
The value represents the angle of rotation , positive value means clockwise, negative value means counterclockwise.

I hope this introduction to the three-dimensional effect of css images will be helpful to everyone!

The above is the detailed content of How to use css to make images have a three-dimensional effect on the page? (code test). For more information, please follow other related articles on the PHP Chinese website!

css 伪元素 transform

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief introduction to the differences between the two imported style files in cssNext article：A brief introduction to the differences between the two imported style files in css

See more

How to use css to make images have a three-dimensional effect on the page? (code test)

Related articles