Tạo hiệu ứng 3D Layered Image đơn giản bằng CSS

15 Likes Comment
3d layered image thumbnail

Bài viết hướng dẫn các bạn tạo hiệu ứng 3D Layered Image, khi trỏ chuột vào image sẽ kích hoạt hiệu ứng. Code chỉ gồm HTML và CSS nên sẽ khá là đơn giản.

Hình ảnh sử dụng trong bài viết các bạn có thể tải tại đây:
Hướng dẫn thực hiện:
  1. Các bạn tạo lần lượt các file index.html, main.css, và trong file hình ảnh tải về các bạn sẽ lấy file có tên là 02.jpg đổi tên thành img2.jpg. Các file này đặt chung vào một thư mục.
  2. Bước tiếp theo là thêm thẻ headbody tương tự khi bắt đầu một trang HTML bình thường. Đối với VS Code, sau khi lưu file index.html, các bạn có thể dùng snippet html để ngay lập tức tạo thẻ headbody.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Layered Image Hover Effects</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
        <script src="main.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    Bên main.css các bạn thêm vào:

    body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  3. Thêm một div với class là .container:
    <body>
        <div class="container">
            
        </div>
    </body>

    Sang bên main.css, các bạn thêm style cho .container:

    .container{
        position: relative;
        width: 360px;
        height: 640px;
        margin-top: 150px;
        background: rgba(0, 0, 0, 0.1);
        transform: rotate(-30deg) skew(25deg) scale(0.8);
        transition: 0.5s;
    
    }
  4. Thêm image vào trong container, đây là image chúng ta sẽ tạo hiệu ứng 3d layered, do đó chúng là sẽ thêm 4 thẻ image, và dùng cùng một ảnh.
    <div class="container">
            <img src="img2.jpg">
            <img src="img2.jpg">
            <img src="img2.jpg">
            <img src="img2.jpg">
    </div>

    Và trong phần css:

    .container img{
        position: absolute;
        width: 100%;
        transition: 0.5s;
    }
  5. Để tạo hiệu ứng, chúng ta làm thêm vào CSS như sau:
    .container:hover img:nth-child(4){
        transform: translate(160px, -160px);
        opacity: 1;
    }
    
    .container:hover img:nth-child(3){
        transform: translate(120px, -120px);
        opacity: 0.8;
    }
    
    .container:hover img:nth-child(2){
        transform: translate(80px, -80px);
        opacity: 0.6;
    }
    
    .container:hover img:nth-child(1){
        transform: translate(40px, -40px);
        opacity: 0.4;
    }

Với các bước trên, các bạn đã tạo xong hiệu ứng 3D Layered Image Hover. Dưới đây là hướng dẫn bằng video:

Các bạn có thể xem demo và download source tại đây.

You might like

About the Author: Sharescript.net

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *