Cách triển khai:
Hoạt ảnh CSS rất thú vị; vẻ đẹp của họ là thông qua nhiều tính chất đơn giản, bạn có thể tạo ra bất cứ thứ gì từ một sự mờ nhạt thanh lịch trong một hiệu ứng WTF-Pixar-sẽ-tự hào. Một hiệu ứng CSS ở đâu đó ở giữa là hiệu ứng lật CSS, nhờ đó có nội dung ở cả mặt trước và mặt sau của một vùng chứa nhất định. Hướng dẫn này sẽ hiển thị cho bạn thấy để tạo hiệu ứng đó theo cách đơn giản nhất có thể.
HTML
Cấu trúc HTML để đạt được tác dụng hai mặt là như bạn mong chờ nó là:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
Có hai panes nội dung, "trước" và "quay lại", như bạn mong đợi, nhưng cũng có hai phần tử chứa các vai trò rất cụ thể được giải thích bởi CSS của chúng. Cũng lưu ý phần ontouchstart cho phép các tấm trao đổi trên màn hình cảm ứng.
CSS
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Dưới đây là một thô tổng quan của quá trình:
Container xa trung tâm đặt quan điểm của toàn bộ khu vực phim hoạt hình của
Các thùng chứa bên trong là yếu tố thực sự lật, quay 180 độ khi vùng chứa mẹ được di chuột qua. Đây cũng là nơi bạn kiểm soát tốc độ chuyển đổi. Thay đổi xoay thành -180deg quay các phần tử theo hướng ngược lại.
Các phần tử trước và sau được đặt hoàn toàn để chúng có thể "phủ" nhau ở cùng một vị trí; khả năng hiển thị backface của chúng bị ẩn nên mặt sau của các thành phần bị lật không hiển thị trong thời gian hoạt ảnh .
Yếu tố trước có z-index cao hơn các yếu tố trở nên yếu tố trước có thể được mã hóa đầu tiên nhưng nó vẫn hiển thị trên đầu trang
- Yếu tố lại là xoay 180 độ, để đóng vai trò như đằng sau.
Đó thực sự là tất cả với nó! Đặt cấu trúc đơn giản này vào vị trí và sau đó tạo kiểu cho mỗi bên như bạn muốn!
CSS Lật Chuyển đổi
Nếu bạn muốn phần tử chỉ lật trên lệnh qua JavaScript, một đơn giản lớp CSS chuyển đổi sẽ làm các trick:
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper
{
transform: rotateY(180deg);
}
Thêm lớp lật đến phần tử vùng chứa sẽ lật thẻ bằng JavaScript - không cần di chuột qua người dùng. Nhận xét JavaScript như
document.querySelector("#myCard").classList.toggle("flip") sẽ thực hiện thao tác lật!
CSS Vertical Lật
Thực hiện lật dọc là dễ dàng như lật trục và thêm giá trị chuyển đổi xuất xứ trục. Nguồn gốc của flip phải được cập nhật và thẻ xoay theo cách khác:
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 213.5px; /* half of height */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
Bạn có thể thấy rằng việc tiếp cận X được sử dụng, không phải là Y.
Tất cả tín dụng đi vào phát triển David Walsh, tôi vừa sao chép nội dung.
đó là một thứ tự khá cao đối với trình duyệt chéo. –
Bạn sẽ kết thúc việc tạo lại các thư viện hiện có. Vấn đề với việc sử dụng thư viện là gì? –
@Daniel, Vâng, tôi đồng ý. Tôi đã tìm kiếm một giải pháp như vậy trong một thời gian dài. Nhưng luôn luôn kết thúc ở chuyển đổi webkit hoặc một số plugin jquery. Rất tiếc, tôi không thể sử dụng những thời gian này vì giải pháp phải là trình duyệt chéo. – manishekhawat