Lật hình ảnh

Trong bài thực hành này, chúng ta sẽ tìm hiểu tạo hiệu ứng lật hình ảnh 3d bằng HTML và CSS.

Lật hình ảnh

Di chuột vào hình ảnh để xem hiệu ứng chuyển đổi 3D.

Nam Connel

Architect & Engineer

Hello guy!

Xem kết quả

Cách tạo hiệu ứng lật hình ảnh

Bước 1) Thêm HTML:

Ví dụ

<div class="mycontainer">
    <div class="container-flip">
        <div class="flip-front">
            <img src="/thuc-hanh/images/fade-nam.jpg" alt="flip card" width="100%" height="100%" />
        </div>
        <div class="flip-back">
            <h1>Nam Connel</h1>
            <p>Architect & Engineer</p>
            <p>Hello guy!</p>
        </div>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Cài đặt chiều rộng và chiều cao cho vùng chứa toàn bộ */
.mycontainer {
    width:300px;
    height:300px;
    border:1px solid #f1f1f1;
    perspective:1000px; /* Thêm hiệu ứng chuyển đổi xoay 3d */
}
.mycontainer:hover .container-flip {
    transform:rotateY(180deg);    
    -webkit-transform:rotateY(180deg);
}
/* Tạo kiểu vùng chứa mặt trước và sau của thẻ card */
.container-flip {
    position:relative; /* Vùng chứa phải là định vị tương đối */     
    text-align:center;
    width:100%;
    height:100%;
    transition:transform 0.8s;
    transform-style:preserve-3d;
}
/* Tạo kiểu cho mặt trước và mặt sau */
.flip-front, .flip-back {
    position:absolute;
    text-align:center;
    width:100%;
    height:100%;
    backface-visibility:hidden; /* Không hiển thị mặt sau khi xoay 3D */
    -webkit-backface-visibility:hidden;    
}
/* Tạo kiểu cho mặt sau */
.flip-back {
    background-color:dodgerblue;
    color:white;
    transform:rotateY(180deg);    
}