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

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

Recommend

Complete code of Vue + iView to realize Excel upload function

1. HTML part <Col span="2">Upload...

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock'

error message: ERROR 2002 (HY000): Can't conn...

A small piece of HTML code will include the Baidu search bar in your page

<html> <head> <meta http-equiv=&quo...

HTML+CSS to achieve cyberpunk style button

First look at the effect: Preface: I came up with...

MySQL batch removes spaces in a certain field

Is there any way to remove spaces from a certain ...

Implementing form submission without refreshing the page based on HTML

Using ajax to implement form submission without re...

Vue binding object, array data cannot be dynamically rendered case detailed explanation

Project scenario: Dark Horse Vue project manageme...

How to handle token expiration in WeChat Mini Programs

Table of contents Conclusion first question Solut...

HTML markup language - form

Click here to return to the 123WORDPRESS.COM HTML ...

How to create an Nginx server with Docker

Operating environment: MAC Docker version: Docker...

Navicat connects to MySQL8.0.11 and an error 2059 occurs

mistake The following error occurs when connectin...

Implementation of Docker container state conversion

A docker container state transition diagram Secon...

JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

Overview: I drew lessons from several timetable s...

Detailed explanation of cross-usage of Ref in React

Table of contents 1. First, let’s explain what Re...

A brief introduction to the general process of web front-end web development

I see many novice students doing front-end develop...