Pure CSS to achieve three-dimensional picture placement effect example code

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%;<br> padding: 2%;<br> margin: 5%;<br>
}  

<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 percentage basis of an element's height is the height of its parent element, and the percentage basis of an element's width, padding, and margin is 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 has different sizes.

· 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>

Summarize

The above is the pure CSS method introduced by the editor to achieve the three-dimensional picture arrangement effect. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Difference between querySelector and getElementById methods in JS

>>: Detailed process of compiling and installing Storm on Kylin V10 server

Pure CSS to achieve three-dimensional picture placement effect example code

MySQL implements string concatenation, interception, replacement, and position search operations

How to add sudo permissions to a user in Linux environment

CentOS 7.6 batch add, modify and delete virtual network cards operation introduction

Detailed explanation of the usage and differences of MySQL views and indexes

Vue3 encapsulates the side navigation text skeleton effect component

jQuery uses the canvas tag to draw the verification code

How to use boost.python to call c++ dynamic library in linux

Detailed explanation of various HTTP return status codes

How to query a record in Mysql in which page of paging

Detailed explanation of the principle of Vue monitoring data

Recommend

Summary of common commands for building ZooKeeper3.4 middleware under centos7

Example of using javascript to drag and swap div positions

Sample code for implementing multi-application deployment using tomcat+nginx

Use nginx.vim tool for syntax highlighting and formatting configuration nginx.conf file

Pitfalls encountered when installing MySQL 8.0.18 compressed package and resetting forgotten passwords

Vue ElementUI Form form validation

Tutorial on installing Docker in Windows 10 subsystem Ubuntu (WSL) (with pictures and text)

Use Element+vue to implement start and end time limits

Detailed explanation of uniapp painless token refresh method

Javascript to achieve the drag effect of the login box

Personalized and creative website design examples (30)

About VUE's compilation scope and slot scope slot issues

MySQL knowledge points for the second-level computer exam mysql alter command

Native JS to implement breathing carousel

How to reset the root password of Mysql in Windows if you forget it