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

Home

Web Front-end

CSS Tutorial

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

藏色散人

Aug 09, 2018 pm 04:45 PM

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="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"      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!

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

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that