使用CSS3 transforms属性构建3D书本翻页动画

Animated Books with CSS 3D Transforms 本例需要支持preserve-3d属性，IE10及以下版本不支持该特性。

模板，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2136
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<body>
    <div class="container">
        <header>
            <h1>Animated Books <span>with CSS 3D Transforms</span></h1>
        </header>
        <div class="component">

<ul class='hardcover_front'>
                            <li>
                                <div class="coverDesign yellow">
                                    <span class="ribbon">NEW</span>
                                    <h1>CSS</h1>
                                    <p>TRANSFORM</p>
                                </div>
                            </li>
                            <li></li>
                        </ul>

<ul class='page'>
                            <li></li>
                            <li>
                                <a class="btn" href="#">Download</a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>

<ul class='hardcover_back'>
                            <li></li>
                            <li></li>
                        </ul>
                        <ul class='book_spine'>
                            <li></li>
                            <li></li>
                        </ul>
                        <figcaption>
                            <h1>CSS Ninja</h1>
                            <span>By Marco Barría for Codrops</span>
                            <p>Tomatillo water chestnut mustard cabbage yarrow sierra leone bologi. Watercress green bean groundnut earthnut pea dandelion radicchio.</p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure class='book'>

<ul class='hardcover_front'>
                            <li>
                                <div class="coverDesign blue">
                                    <h1>JS</h1>
                                    <p>FUNCTION</p>
                                </div>
                            </li>
                            <li></li>
                        </ul>

<ul class='hardcover_back'>
                            <li></li>
                            <li></li>
                        </ul>
                        <ul class='book_spine'>
                            <li></li>
                            <li></li>
                        </ul>
                        <figcaption>
                            <h1>Storm JS</h1>
                            <span>By Marco Barría for Codrops</span>
                            <p>Leek winter purslane sierra leone bologi caulie tomatillo soko turnip greens bunya nuts silver beet melon green bean celery. Gram kakadu plum wakame.</p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure class='book'>

<ul class='hardcover_front'>
                            <li>
                                <div class="coverDesign grey">
                                    <span class="ribbon">Nº1</span>
                                    <h1>HTML5</h1>
                                    <p>CANVAS</p>
                                </div>
                            </li>
                            <li></li>
                        </ul>

<ul class='hardcover_back'>
                            <li></li>
                            <li></li>
                        </ul>
                        <ul class='book_spine'>
                            <li></li>
                            <li></li>
                        </ul>
                        <figcaption>
                            <h1>Zen HTML5</h1>
                            <span>By Marco Barría for Codrops</span>
                            <p>Salsify horseradish winter purslane yarrow zucchini bush tomato aubergine cauliflower broccoli. Kohlrabi azuki bean chickpea quandong dandelion seakale.</p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure class='book'>

<ul class='hardcover_back'>
                            <li></li>
                            <li></li>
                        </ul>
                        <ul class='book_spine'>
                            <li></li>
                            <li></li>
                        </ul>
                        <figcaption>
                            <h1>Papelucho Perdido</h1>
                            <span>By Marcela Paz</span>
                            <p>Fennel bamboo shoot pea sprouts rutabaga parsnip green bean gram wattle seed lentil horseradish nori. Grape lettuce turnip greens.</p>
                        </figcaption>
                    </figure>
                </li>
            </ul>
            <p class="note">Please note that this only works in browsers that support CSS 3D Transforms. Also note that IE10 <strong>does not</strong> support <em>preserve-3d</em> which is needed for this demo.</p>
        </div>
    </div>
    
</body>

</html>

Animated Books with CSS 3D Transforms 本例需要支持preserve-3d属性，IE10及以下版本不支持该特性。

模板，教程

编辑器支持Emmet

快捷键

Animated Books with CSS 3D Transforms 本例需要支持preserve-3d属性，IE10及以下版本不支持该特性。

模板，教程

使用CSS 3D transforms属性创建的立体画室

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：