CSS3 simple cutting carousel picture implementation code

CSS3 simple cutting carousel picture implementation code

Implementation ideas

  • First, create a parent container and use two unordered lists to divide the parent container into two columns through flexible layout.
  • When storing images in li, you can divide the images into two columns by giving the left li {background: url('image address') no-repeat; background-size: 200% 100%;} and the right li {background-position-x: -300 (half the width of the parent container) px;}.
  • Give ul the {ransform-style: preserve-3d; } attribute to enable the browser's 3D display.
  • Use child and parent to stack the li together ul{position: relative;} li {position: absolute;}.
  • Set the rotation of li through the transform property.
  • Here you can add .box:hover>ul { transition: all 5s;transform: rotateX(360deg); } to see the effect.
  • Finally, add two buttons to allow users to switch images themselves.
  • When clicking, just change the rotation angle of ul
  btn1.onclick = ()=>{
            item++;
            let r = item * 90;
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'all 1s';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'all 1s .3s';
        }
        btn2.onclick = ()=>{
            item--;
            let r = item * 90;
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'all 1s';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'all 1s .3s';
        }

Finally, attach all the codes, I hope it will be helpful for you to learn the front-end

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cut the carousel image</title>
</head>
<body>
    <div class="box">
        <ul class="letf">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <button id="btn1">Previous page</button><button id="btn2">Next page</button>
</body>
</html>

CSS Code

*{
    margin: 0;
    padding: 0;
}
body{
    perspective: 800px;
}
.box{
    display: flex;
    width: 600px;
    height: 350px;
    margin: 150px auto;
}
.box:hover ul li:nth-child(1){
    transition: all 5s;
    transform: rotateX(360deg);
}
ul{
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    transform-style: preserve-3d; /* Enable 3D display in the browser*/
    position: relative;
}
li{
    width: 100%;
    height: 100%;
    position: absolute;
}
li:nth-child(1){
    background: url('../images/9.jpg') no-repeat;
    background-size: 200% 100%;
    transform: translateZ(175px);

}
li:nth-child(2){
    background: url('../images/10.jpg') no-repeat;
    background-size: 200% 100%;
    transform: rotateX(90deg) translateZ(175px);
}
li:nth-child(3){
    background: url('../images/11.jpg') no-repeat;
    background-size: 200% 100%;
    transform: rotateX(180deg) translateZ(175px);
}
li:nth-child(4){
    background: url('../images/12.jpg') no-repeat;
    background-size: 200% 100%;
    transform: rotateX(-90deg) translateZ(175px);
}
.right li{
    background-position-x: -300px;
}

js code

  let item = 0;
        let btn1 = document.getElementById('btn1');
        let btn2 = document.getElementById('btn2');
        let letf = document.querySelector('.letf');
        let right = document.querySelector('.right')
        btn1.onclick = ()=>{
            item++;
            let r = item * 90;
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'all 1s';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'all 1s .3s';
        }
        btn2.onclick = ()=>{
            item--;
            let r = item * 90;
            letf.style.transform = 'rotateX(' + r + 'deg)';
            letf.style.transition = 'all 1s';
            right.style.transform = 'rotateX(' + r + 'deg)';
            right.style.transition = 'all 1s .3s';
        }

This is the end of this article about the implementation code of CSS3 simple cutting carousel. For more relevant CSS3 cutting carousel content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Implementation of Vue top tags browsing history

>>:  Several common methods for passing additional parameters when submitting a form

Recommend

Solution to the problem of crash when opening the command line window after installing MySQL 5.7

Preface I recently installed MySQL 5.7 and found ...

Detailed explanation of how to detect and prevent JavaScript infinite loops

Table of contents Preface Fix infinite loop in fo...

Detailed explanation of Nginx static service configuration (root and alias instructions)

Static files Nginx is known for its high performa...

Example of how to retrieve the latest data using MySQL multi-table association one-to-many query

This article uses an example to describe how to r...

Analysis of the principles of docker containers

Table of contents 01 What is the essence of a con...

The simplest solution to the problem that Sublime Text cannot input Chinese in Ubuntu

Sublime Sublime Text is a code editor (Sublime Te...

An IE crash bug

Copy code The code is as follows: <style type=...

Building command line applications with JavaScript

Table of contents 1. Install node 2. Install Comm...

js to achieve cool fireworks effect

This article shares the specific code for using j...

Introduction to general_log log knowledge points in MySQL

The following operation demonstrations are all ba...

How to install Windows Server 2008 R2 on Dell R720 server

Note: All pictures in this article are collected ...

Vue+el-table realizes merging cells

This article example shares the specific code of ...

CSS Standard: vertical-align property

<br />Original text: http://www.mikkolee.com...

MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)

How to install MySQL 5.7 in Ubuntu 16.04? Install...

How to deploy MySQL 5.7 & 8.0 master-slave cluster using Docker

> Deploy MySQL 5.7 cluster master & slave ...