资讯专栏INFORMATION COLUMN

一个纯CSS3实现的酷炫翻书效果

xfee / 1635人阅读

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

项目地址:https://github.com/BUPT-HJM/c...
demo地址:https://bupt-hjm.github.io/cs...
欢迎大家的star啦~

效果细节

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

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哦~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49941.html

相关文章

  • 一个CSS3实现的酷翻书效果

    摘要:的三维元素比正常大,而时则比正常小,大小程度由该属性的值决定属性指定了观察者与平面的距离,使具有三维位置变换的元素产生透视效果。 showImg(https://segmentfault.com/img/bVzAjp); 项目地址:https://github.com/BUPT-HJM/c...demo地址:https://bupt-hjm.github.io/cs...欢迎大家的st...

    fizz 评论0 收藏0
  • SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

    摘要:层叠即表示允许以多种方式来描述样式,一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用后,将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

    elliott_hu 评论0 收藏0
  • 谈谈常见H5制作方法——视频与CSS3

    摘要:但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题,并且可以实现交互。 本文在H5动效的常见制作手法的基础上,对相印的H5动效制作手法进行了扩展和整理,并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真,流畅的体验。虽然说制作视频的难度较大,但是瑕不掩瑜,一支视频可以尽可能地创造出...

    Flink_China 评论0 收藏0
  • 谈谈常见H5制作方法——视频与CSS3

    摘要:但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题,并且可以实现交互。 本文在H5动效的常见制作手法的基础上,对相印的H5动效制作手法进行了扩展和整理,并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真,流畅的体验。虽然说制作视频的难度较大,但是瑕不掩瑜,一支视频可以尽可能地创造出...

    Bmob 评论0 收藏0
  • 谈谈常见H5制作方法——视频与CSS3

    摘要:但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题,并且可以实现交互。 本文在H5动效的常见制作手法的基础上,对相印的H5动效制作手法进行了扩展和整理,并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真,流畅的体验。虽然说制作视频的难度较大,但是瑕不掩瑜,一支视频可以尽可能地创造出...

    tracy 评论0 收藏0

发表评论

0条评论

xfee

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<