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

Detailed explanation of the process of deploying the distributed configuration center Apollo with one click using docker compose

Introduction When talking about distribution, we ...

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

Vue easily realizes watermark effect

HTML+CSS to create a top navigation bar menu

Analysis of Linux Zabbix custom monitoring and alarm implementation process

Analysis of the principle of Nginx using Lua module to implement WAF

Linux common commands chmod to modify file permissions 777 and 754

Some improvements in MySQL 8.0.24 Release Note

Simple steps to write custom instructions in Vue3.0

How to configure MySQL master-slave replication under Windows

Three examples of blur background effects using CSS3

Fabric.js implements DIY postcard function

Recommend

Vue implements a small weather forecast application

Solve the problem that the commonly used Linux command "ll" is invalid or the command is not found

How to use Javascript to generate smooth curves

How to implement responsive layout in vue-cli

Pricing table implemented with CSS3

Detailed explanation of the process of deploying the distributed configuration center Apollo with one click using docker compose

Two ways to install the Linux subsystem in Windows 10 (with pictures and text)

Using VMware IOInsight to perform refined virtual machine storage performance monitoring

Mini Program implements list countdown function

Three examples of nodejs methods to obtain form data

Docker overlay realizes container intercommunication across hosts

Undo log in MySQL

How to move a red rectangle with the mouse in Linux character terminal

Sample code for deploying ELK using Docker-compose

Pagination Examples and Good Practices