Use CSS to achieve 3D convex and concave effects on images (convex out of the frame or concave in the frame)

Ⅰ. Problem description:

Use CSS to achieve 3D convex and concave effect of pictures;

ⅡThe implementation process is as follows:

1. The display results are:
A. Normal pictures (both Picture 1 and Picture 2 are normal):

insert image description here

B. The image 1 is protruding out of the frame, while the image 2 is normal;
Trigger process: Place the mouse within the red frame of Figure 1, and the result will be displayed;

insert image description here

C. Picture 1 is normal, Picture 2 is sunken into the frame;
Trigger process: put the mouse in the red frame of Figure 2, and the result will be displayed;

insert image description here

2. Run the software VScode , and it can be realized by personal test;

3. Run the code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid red;
            margin: 100px 0 0 100px;
            perspective:500px;
            /* 
            "perspective:500px;" means: perspective distance (effect of small things in the distance and large things near);
            But only the feeling has changed, and the actual size has not changed;
             */
        }

        .wrap img {
            transition: 0.5s;
        }

        .wrap:nth-child(1):hover img {
            transform: translateZ(100px);
            /* "translateZ(100px);" means: translate 100px in the positive direction of the Z axis (vertical to the outside of the screen is positive); */
        }

        .wrap:nth-child(2):hover img {
            transform: translateZ(-100px);
            /* "translateZ(-100px);" means: translate 100px in the negative direction of the Z axis (negative inwards vertically on the screen); */
        }
      
    </style>
</head>
<body>

<div class="wrap">
    <img src="pic02.jpg"/>
</div>
<!-- 
    The src address in img at this time refers to the address of the image you loaded. When the address of the image and the code document are in the same directory, the address can be simply introduced like the above code;
 -->
<div class="wrap">
    <img src="pic02.jpg"/>
</div>

</body>
</html>

III. Conclusion

This is the end of this article about how to use CSS to achieve 3D convex and concave effects on images (protruding outside the frame or sunken into the frame). For more relevant content about how to use CSS to achieve 3D convex and concave effects, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: How to use React to implement image recognition app

>>: Detailed explanation of the relationship between Linux and GNU systems

About the bug of better-scroll plug-in that cannot slide (solved by plug-in in 2021)

Use CSS to achieve 3D convex and concave effects on images (convex out of the frame or concave in the frame)

Ⅰ. Problem description:

ⅡThe implementation process is as follows:

III. Conclusion

About the bug of better-scroll plug-in that cannot slide (solved by plug-in in 2021)

In-depth explanation of Set and WeakSet collections in ES6

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

Baidu Input Method opens API, claims it can be ported and used at will

Mysql string interception and obtaining data in the specified string

Five guidelines to help you write maintainable CSS code

Detailed explanation of the three major front-end technologies of React, Angular and Vue

Sample code for implementing mobile expansion and collapse effects with pure CSS3

base target="" controls the link's target open frame

Implementation of clicking through the transparent area of irregular forms in Electron

Recommend

The whole process record of introducing Vant framework into WeChat applet

Implementing password box verification information based on JavaScript

How to manually build a new image with docker

How to understand the difference between ref toRef and toRefs in Vue3

About Vue virtual dom problem

Bootstrap+Jquery to achieve calendar effect

How to add default time to a field in MySQL

Analyze MySQL replication and tuning principles and methods

Clever use of webkit-box-reflect to achieve various dynamic effects (summary)

js+Html to realize table editable operation

Detailed explanation of mysql record time-consuming sql example

Solution for VMware Workstation Pro not running on Windows

An article to understand what is MySQL Index Pushdown (ICP)

Front-end development general manual (including tools, websites, experience, etc.)

JavaScript CollectGarbage Function Example