所以,新的一天已经来临。您终于对长篇大的文字感到无聊了,希望找到新的格式。优雅的风格。紧凑一点。某个工具会提取长卷轴,将其切成简洁的小矩形,然后将它们绑定在一起。我将这项发明称为“书”
借助 CSS 区域(CanIUse,前往 chrome://flags
并启用 CSS 区域)和 CSS 3D 转换功能,先进的图书技术终于可以在现代浏览器中使用了。您只需要几行 JavaScript 和大量 CSS 即可。
首先,我们来定义客户名录的结构。书页由页面组成,书页由两面组成。侧边包含图书内容:
<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>
我们将使用 CSS 区域将图书文本流入图书页面。但首先我们需要图书文字。
<span id="book-content">
blah blah blah ...
</span>
现在,我们已经编写好书,接下来要定义 flow CSS。我使用 + 字符作为供应商前缀占位符,将其替换为 -webkit-
(对于 WebKit 浏览器)和 -moz-
(对于 Firefox),依此类推:
#book-content {
+flow-into: book-text-flow;
}
.book-pages {
+flow-from: book-text-flow;
}
现在,#book-content span 中的内容将会显示在 .book-pages div 中。不过,这本书很差。想要读一本书里的内容,我们必须踏上挑战。我们的旅程将引领 CSS 转换的彩虹桥,踏上 JavaScript 发光的时代。在机械童话的大厅中,我们将释放史诗级的过渡魔法,并获得控制世界界面的三把传说钥匙。
彩虹桥的守护者向我们传授了时尚结构选择器的智慧,以便我们可以将 HTML 图书结构转变为更像书本的形式:
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;
}
通过这样的方式,我们为 HTML 创建了一个有点像纸质的样式,进而解决了 JavaScript 王国的万亿万状之门。要顺利通过大门,我们必须把扁平化的书转换成适当的卷。为了增加图书的音量,我们在 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)');
}
}
}
})();
施展过渡魔法来征服精灵并不是最难的调用。然而,结果使我们图书的页面以动画方式流畅呈现。
.book > div {
+transition: 1s ease-in-out;
}
最后,要使页面实际转动,我们需要将事件本身绑定到我们的原因。
(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++;
}
};
})();
因此,我们获得了“书籍”技术,能够撤离地外水晶塔,留下它们致命的眩光和激烈的核火灾,是地上直接关系界的巨大蓝色之星 Achenar。我们胜利地回到家,高高地把书摆在头顶上,准备迎接如火如荼的游行和庆祝仪式。
您可以在此处查看在线示例,并获取示例的完整源代码。如果您的浏览器中没有 CSS 区域,则示例看起来非常损坏。如果属于这种情况,您可以试试这个示例。