纯css实现翻书效果

一时失言乱红尘 2021-09-29 16:58 550阅读 0赞

### 前言 ###

最近研究了一下css3的3D效果，写了几个demo，写篇博客总结一下实现的经过。PS:如果对transform-origin/perspective/transform-style这些概念还不了解，可以先看看张鑫旭大神写的这篇通俗易懂的文章：[好吧，CSS3 3D transform变换，不过如此！][CSS3 3D transform]。不过就是里面大神配的图片有点污，不适合在办公室看（手动捂脸）。

### 效果图 ###

先来看看实际的效果图：

#### 翻书 ####

![1217259-20190507123106635-187419081.gif][]

#### 旋转方块 ####

![1217259-20190507123123215-229350632.gif][]

### 翻书效果实现过程 ###

html结构如下：

首先在最外层设置一个`perspective`和`transform-style`，设置子元素为3D透视，并且设置眼睛距离屏幕的距离为`800px`。

.perspective {
        margin-top: 100px;
        perspective: 800px;
        transform-style: preserve-3d;
    }

接下来是book-wrap，设置width和height都为300px，并且X轴旋转30deg，这样看着更有立体感，设置子元素为3D透视。

.book-wrap {
        width: 300px;
        height: 300px;
        position: relative;
        margin: 0 auto;
        transform: rotateX(30deg);
        transform-style: preserve-3d;
    }

然后是page，设置绝对定位并且left和top为0，将所有的page重叠起来.元素旋转的基准位置为left,`transform-origin: left`

.page {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-origin: left;
        border: 1px solid #1976D2;
    }

接下来就是使用animation实现动画效果了，我们这里的实现思路是封面页先开始旋转，然后过一秒后是第一页开始旋转，再过一秒是第二页开始旋转，最后是第三页。一个周期设置为6秒，注意每页的`延迟时间 + 旋转时间 === 6s`

.book-content {
        background-color: #fff;
        color: #33363C;
    }
    .book-cover {
        background-color: #1976D2;
        color: #ffffff;
        animation: roll 6s ease 0s 2 alternate;
    }
    .book-content1{
        animation: roll 3s ease 3s 2 alternate;
    }
    .book-content2 {
        animation: roll 4s ease 2s 2 alternate;
    }
    .book-content3 {
        animation: roll 5s ease 1s 2 alternate;
    }

这样就使用纯css实现了一个完整的翻书效果，源码地址[https://github.com/heavenYJJ/css3/blob/master/translate-book.html][https_github.com_heavenYJJ_css3_blob_master_translate-book.html]

### 旋转方块 ###

路过webpack官网的时候看见他的logo，觉得很好看，然后就照着他的样子撸了一个出来。使用css3画正方体网上有很多文章，这里我们就不具体描述了，直接贴出源码地址[https://github.com/heavenYJJ/css3/blob/master/cube.html。][https_github.com_heavenYJJ_css3_blob_master_cube.html]

转载于:https://www.cnblogs.com/heavenYJJ/p/10791143.html

[CSS3 3D transform]: https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
[1217259-20190507123106635-187419081.gif]: /images/20210725/cb0dec702b734818a6615759b14edc7a.png
[1217259-20190507123123215-229350632.gif]: /images/20210725/b360f08524554733ae395c99e0720a97.png
[https_github.com_heavenYJJ_css3_blob_master_translate-book.html]: https://github.com/heavenYJJ/css3/blob/master/translate-book.html
[https_github.com_heavenYJJ_css3_blob_master_cube.html]: https://github.com/heavenYJJ/css3/blob/master/cube.html