Sample code for achieving three-dimensional picture placement effect with pure CSS

1. Percentage basis for element width/height/padding/margin

When setting the percentage of an element's width/height/padding/margin, do you know what the benchmark is?

For example:

.parent {
  width: 200px;
  height: 100px;
}
.child {
  width: 80%;
  height: 80%;
}
.childchild {
  width: 50%;
  height: 50%;
 padding: 2%;
  margin: 5%;

}

<div class="parent">
        <div class="child">
            <div class="childchild"></div>
        </div>
    </div>

In the above code, what is the width of the childchild element? What is height? What is the padding? What is the margin?

The height percentage of an element is based on the height of its parent element, and the width, padding, and margin percentages of an element are based on the width of its parent element.

From this, I believe everyone has already figured it out. You can try it out~

In interviews, you will often encounter a simple CSS style question, which is to implement an adaptive square. The principle is based on the above knowledge. Just need

#box {
            width: 50%;
            padding-top: 50%;
            background: #000;
        }

Because the base values of element width and padding are both the width of the parent element, and the width of the body is the browser window. So this setting will make the square adaptive as the browser window size changes.

2. Use pure CSS to achieve the effect of three-dimensional picture placement

Now back to the topic, if you want to achieve the three-dimensional placement effect of the pictures shown in the following figure, you need to apply the knowledge of padding, width, and height.

It looks a little familiar. Is it similar to the style of recommended books in novel software?

Here, first let's look at its placement. One picture is horizontally centered and in the front, while the other two pictures are aligned left and right and a little further back, presenting a three-dimensional placement. Here I learned a way to achieve this three-dimensional effect by simply relying on CSS.

The different heights are supported by padding-top, which is large or small. · The before and after effects are controlled by the z-index folding order. The arrangement is controlled by the nth-of-type pseudo-element + position.

Do you have any idea? Let’s not beat around the bush and get straight to the code.

<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 300px;
                height: 200px;
                position: relative;
            }
            .img {
                width: auto;
                height: 0;
            }
            .box img {
                width: 100%;
                display: inline-block;
            }
            .box .img:nth-of-type(1) {
                display: inline-block;
                position: absolute;
                left: 50%;
                top: 50%;
                padding-bottom: 50%;
                transform: translate(-50%, -50%);
                z-index: 6;
            }
            .box .img:nth-of-type(2), .box .img:nth-of-type(3) {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                padding-bottom: 63%;
                z-index: 3;
            }
            .box .img:nth-of-type(2) {
                right: 0;
            }
            .box .img:nth-of-type(3) {
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
        </div>
    </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: HTML sub tag and sup tag

>>: React internationalization react-i18next detailed explanation

Python connects to the database MySQL decompressed version installation configuration and encountered problems

Sample code for achieving three-dimensional picture placement effect with pure CSS

Python connects to the database MySQL decompressed version installation configuration and encountered problems

jQuery plugin to achieve code rain effect

MySQL 5.6 zip package installation tutorial detailed

Implementation of two-way binding of parent-child component data in front-end framework Vue

A brief discussion on how to solve the depends_on order problem in Docker-compose

Use CSS3 background control properties + color transition to achieve gradient effect

Html to achieve dynamic display of color blocks report effect (example code)

Detailed steps to enable SourceGuardian (sg11) encryption component on Linux virtual hosts

MySQL data archiving tool mysql_archiver detailed explanation

JavaScript basics for loop and array

Recommend

How to safely shut down MySQL

Configure Java development environment in Ubuntu 20.04 LTS

Simply understand the differences in the principles of common SQL delete statements

Solution to the problem of invalid width setting for label and span

MySQL cursor functions and usage

Detailed explanation of InnoDB storage files in MySQL

Three common methods for HTML pages to automatically jump after 3 seconds

MySQL 8.0.18 installation and configuration graphic tutorial

CentOS 7 configuration Tomcat9+MySQL solution

Detailed explanation of MySQL using profile to analyze slow SQL (group left join is more efficient than subquery)

MySQL-8.0.26 Configuration Graphics Tutorial

Steps to export the fields and related attributes of MySQL tables

Knowledge about MySQL Memory storage engine

A brief discussion of the interesting box model of CSS3 box-sizing property

The connection between JavaScript constructors and prototypes