Vậy là ngày đó đã đến. Cuối cùng, bạn cũng chán ngấy những cuộn văn bản dài và đang tìm kiếm một định dạng mới. Một cái gì đó thanh lịch. Một cái gì đó nhỏ gọn. Một nội dung sẽ lấy cuộn dài, cắt thành các hình chữ nhật nhỏ gọn gàng và liên kết chúng với nhau. Tôi gọi phát minh này là "sách".
Nhờ sức mạnh của các vùng CSS (CanIUse, hãy chuyển đến chrome://flags và bật các vùng CSS) và các phép biến đổi 3D CSS, công nghệ sách tiên tiến cuối cùng cũng có trên các trình duyệt hiện đại. Bạn chỉ cần một vài dòng JavaScript và rất nhiều CSS.
Hãy bắt đầu bằng cách xác định cấu trúc sách. Cuốn sách bao gồm các trang và các trang bao gồm hai mặt. Các cạnh chứa nội dung sách:
<div class="book">
<div> <!-- first page -->
<div> <!-- front cover -->
# My Fancy Book
</div>
<div> <!-- backside of cover -->
# By Me I. Myself
## 2012 Bogus HTML Publishing Ltd
</div>
</div>
<!-- content pages -->
<div>
<!-- front side of page -->
<div class="book-pages"></div>
<!-- back side of page -->
<div class="book-pages"></div>
</div>
<div>
<div class="book-pages"></div>
<div class="book-pages"></div>
</div>
<div>
<div class="book-pages"></div>
<div class="book-pages"></div>
</div>
</div>
Chúng ta sẽ sử dụng các vùng CSS để chuyển văn bản sách vào các trang sách. Nhưng trước tiên, chúng ta cần có văn bản của cuốn sách.
<span id="book-content">
blah blah blah ...
</span>
Bây giờ, khi đã viết xong cuốn sách, hãy xác định flow CSS. Tôi đang sử dụng ký tự + làm phần giữ chỗ tiền tố của nhà cung cấp, thay thế ký tự này bằng -webkit- cho trình duyệt WebKit, -moz- cho Firefox, v.v.:
#book-content {
+flow-into: book-text-flow;
}
.book-pages {
+flow-from: book-text-flow;
}
Giờ đây, nội dung từ span #book-content sẽ chuyển vào div .book-pages. Tuy nhiên, đây là một cuốn sách khá nghèo nàn. Để có một cuốn sách đúng nghĩa hơn, chúng ta phải bắt đầu một cuộc phiêu lưu. Hành trình của chúng ta sẽ dẫn qua cầu vồng của các phép biến đổi CSS đến vương quốc đồng hồ của JavaScript. Trong đại sảnh của các vị tiên cơ khí, chúng ta sẽ khai thác phép thuật chuyển đổi hoành tráng và nhận được ba chiếc chìa khoá huyền thoại giúp kiểm soát giao diện thế giới trên.
Người bảo vệ cầu vồng truyền cho chúng ta sự thông thái của bộ chọn cấu trúc kiểu cách để chúng ta có thể biến cấu trúc sách HTML thành một hình dạng giống sách hơn:
html {
width: 100%;
height: 100%;
}
body {
/* The entire body is clickable area. Let the visitor know that. */
cursor: pointer;
width: 100%;
height: 100%;
/* Set the perspective transform for the page so that our book looks 3D. */
+perspective: 800px;
/* Use 3D for body, the book itself and the page containers. */
+transform-style: preserve-3d;
}
.book {
+transform-style: preserve-3d;
position: absolute;
}
/* Page containers, contain the two sides of the page as children. */
.book > div {
+transform-style: preserve-3d;
position: absolute;
}
/* Both sides of a page. These are flat inside the page container, so no preserve-3d. */
.book > div > div {
/* Fake some lighting with a gradient. */
background: +linear-gradient(-45deg, #ffffff 0%, #e5e5e5 100%);
width: 600px;
height: 400px;
overflow: hidden;
/* Pad the page text a bit. */
padding: 30px;
padding-bottom: 80px;
}
/* Front of a page */
.book > div > div:first-child {
/* The front side of a page should be slightly above the back of the page. */
+transform: translate3d(0px, 0px, 0.02px);
/* Add some extra padding for the gutter. */
padding-left: 40px;
/* Stylish border in the gutter for visual effect. */
border-left: 2px solid #000;
}
/* Back of a page */
.book > div > div:last-child {
/* The back side of a page is flipped. */
+transform: rotateY(180deg);
padding-right: 40px;
border-right: 2px solid #000;
}
/* Front cover of the book */
.book > div:first-child > div:first-child {
/* The covers have a different color. */
background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%);
/* Put a border around the cover to make it cover the pages. */
border: 2px solid #000;
/* And center the cover. */
margin-left: -1px;
margin-top: -1px;
}
/* Back cover of the book */
.book > div:last-child > div:last-child {
background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%);
border: 2px solid #000;
margin-left: -1px;
margin-top: -1px;
}
Khi tạo một kiểu có hình dạng giống như giấy cho HTML, chúng ta đã đến với cổng vào của vương quốc JavaScript. Để đi qua cổng, chúng ta phải biến cuốn sách phẳng thành một cuốn sách có kích thước phù hợp. Để thêm một số khối lượng cho cuốn sách, chúng ta sẽ dịch chuyển nhẹ mỗi trang trên trục z.
(function() {
var books = document.querySelectorAll('.book');
for (var i = 0; i < books.length; i++) {
var book = books[i];
var pages = book.childNodes;
for (var j = 0; j < pages.length; j++) {
if (pages[j].tagName == "DIV") {
setTransform(pages[j], 'translate3d(0px, 0px, ' + (-j) + 'px)');
}
}
}
})();
Việc sử dụng phép thuật chuyển đổi để gây ấn tượng với các chúa tiên không phải là lệnh gọi khó khăn nhất. Tuy nhiên, kết quả này giúp các trang của cuốn sách chuyển động một cách mượt mà.
.book > div {
+transition: 1s ease-in-out;
}
Cuối cùng, để các trang thực sự xoay, chúng ta cần liên kết các sự kiện với nguyên nhân của chúng ta.
(function(){
// Get all the pages.
var pages = document.querySelectorAll('.book > div');
var currentPage = 0;
// Go to previous page when clicking on left side of window.
// Go to the next page when clicking on the right side.
window.onclick = function(ev) {
if (ev.clientX < window.innerWidth/2) {
previousPage();
} else {
nextPage();
}
ev.preventDefault();
};
var previousPage = function() {
if (currentPage > 0) {
currentPage--;
// Rotate the page to closed position and move it to its place in the closed page stack.
setTransform(pages[currentPage], 'translate3d(0px,0px,' + (-currentPage) + 'px) rotateY(0deg)');
}
};
var nextPage = function() {
if (currentPage < pages.length) {
// Rotate the page to open position and move it to its place in the opened stack.
setTransform(pages[currentPage], 'translate3d(0px,0px,' + currentPage + 'px) rotateY(-150deg)');
currentPage++;
}
};
})();
Nhờ đó, chúng ta đã có được công nghệ "sách" và có thể sơ tán khỏi các tháp pha lê trên thế giới, để lại ánh sáng chói lòa và ngọn lửa hạt nhân dữ dội của Achenar, ngôi sao xanh khổng lồ của trung tâm trên thế giới. Chúng ta trở về nhà trong chiến thắng, giơ cao sách lên đầu, sẵn sàng cho chuỗi lễ diễu hành và lễ kỷ niệm không thể tránh khỏi để vinh danh chúng ta.
Bạn có thể xem ví dụ trực tuyến tại đây và tải nguồn đầy đủ của các ví dụ này. Nếu bạn không có Khu vực CSS trong trình duyệt, ví dụ này sẽ trông khá hỏng. Trong trường hợp đó, bạn có thể thử ví dụ này.