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

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

藏色散人

Release： 2018-08-09 16:45:10

Original

11048 people have browsed it

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>

Copy after login

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!