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

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

How to build lnmp environment in docker

Front-end AI cutting tips (experience)

WeChat applet realizes the function of uploading pictures

Detailed explanation of the Docker deployment tutorial for Jenkins beginners

js date and time formatting method example

Docker container from entry to obsession (recommended)

How to solve the synchronization delay caused by MySQL DDL

Detailed steps for setting up the network for the virtual machine that comes with win10 (graphic tutorial)

Detailed explanation of ES6 Promise usage

MySQL storage engine basics

Recommend

Detailed steps to configure MySQL remote connection under Alibaba Cloud

Use the njs module to introduce js scripts in nginx configuration

Solve MySQL startup error: ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)

Mysql implements three functions for field splicing

MySQL implements an example method of logging in without a password

Ubuntu 20.04 desktop installation and root permission activation and ssh installation details

MySQL database 8 - detailed explanation of the application of functions in the database

What are the differences between CDN, SCDN, and DCDN for website acceleration? How to choose?

Explanation of nginx load balancing and reverse proxy

Tomcat multi-instance deployment and configuration principles

JavaScript programming through Matlab centroid algorithm positioning learning

Idea packaged into war package deployed to tomcat and access path issues (illustration and text)

A brief discussion on the font settings in web pages

Vue3+script setup+ts+Vite+Volar project

Native JS to implement breathing carousel