HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果

效果细节

其实项目中的关键在于几个属性，perspective和rotate,便是透视和旋转

perspective

属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定

body {

/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/

-webkit-perspective: 1000px;

-moz-perspective: 1000px;

-ms-perspective: 1000px;

perspective: 1000px;

background-color: #212121;

font-family: '微软雅黑';

}

preserve-3d

transform-style属性指定了，该元素的子元素是(看起来)位于三维空间内，还是在该元素所在的平面内被扁平化。

.preserve-3d {

/*transform-style属性指定了，该元素的子元素是(看起来)位于三维空间内，还是在该元素所在的平面内被扁平化。*/

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

}

rotate

在这个效果中rotate起到了很重要的作用，特别是rotateY，沿着Y轴翻转，你所看到的书本的翻页，便是用animation的@keyframe动画实现rotateY的变化,实现翻页效果跟，也要注意到与transform-origin的配合，因为它是旋转轴，尤其关键。

欢迎踩踏github，给star啦~

其他便是css的布局与html的配合了，想要了解详细的可以去github看源码学习，欢迎指正，记得给star哦~

HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果相关推荐

纯CSS3实现超酷幻灯片图文切换效果
纯CSS3实现绚丽焦点图切换效果,这是一款纯CSS3实现的焦点图插件,焦点图设计十分清新简单,图片滑动特别流畅,是一款值得一用的CSS3焦点图.切换点通过表单radio来实现,通过radio的chec ...
纯CSS3实现超酷炫的萤火虫动画
银烛秋光冷画屏,轻罗小扇扑流萤.仲夏之夜,花草从间,萤光舞动,构成一幅诗意的画面.如今用HTML5大显身手,可以做很多有意思的应用和游戏.今天我们要分享一个用纯CSS3做一个萤火虫动画的特效. 先来看 ...
html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码
本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下: 展示效果: HTML代码展开收起唧唧复唧唧,木兰当户织.不闻机杼声,惟闻女叹息.(惟闻通:唯)问女何所思,问女何 ...
Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面
本文主要介绍如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面我将向您展示如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面,所以不用多说,让我们开始吧.在本课程 ...
想实现前端酷炫的打字机效果吗
实现酷炫的打字机效果插件typed.js 前言: 最近在写前端项目的过程中,在逛别人的优质的个人博客的时候,发现一个好玩有趣的东西.看下图,类似在打字的效果,然后又在思考的感觉,感觉整个网页都充满了思 ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
一分钟搞定触手app主页酷炫滑动切换效果
代码地址如下: http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想 ...

HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果

HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果相关推荐

最新文章

热门文章