CSS3 实现纸张折叠效果
今天码云笔记将带大家利用 css3 相关特性实现如下 Gif 图纸张折叠效果,它仅是 CSS,不依赖 JavaScript。喜欢的小伙伴可以拿去学习一下。
准备工作
首先,找一张自己喜欢的图片。
其次,要具有 css3 相关属性的基础知识,如果大家还是没有掌握好这方面的知识,没关系,可以先看看我之前的文章《css3 属性之 transform-origin 属性学习笔记》、《CSS3 变形与动画(上)》、《CSS3 变形与动画(下)》,再往下学习。
将上面的准备工作做好,接下来我们就看看具体实现的源码。
Html 代码:
<span class="mybj"> <span class="a"></span> <span class="bc"> <span class="b"></span> <span class="c"></span> </span> <img src="image/mybj.jpg"> </span>
CSS 代码:
.mybj { position: relative; display: inline-flex; transform: rotateX(10deg); transform-style: preserve-3d; cursor: grab; } .mybj img { width: auto; height: auto; max-width: 100%; max-height: 56vh; opacity: 0; } .mybj .a, .mybj .b, .mybj .c { top: 0; display: inline-block; height: 100%; background-image: url(image/mybj.jpg); background-size: cover; background-repeat: no-repeat; } .mybj .a { position: absolute; left: 0; width: 50%; background-position: 0 0; } .mybj .bc { position: absolute; display: inline-flex; width: 50%; height: 100%; left: 50%; transform-origin: left; transition: transform 3s; transform-style: preserve-3d; } .mybj .b, .mybj .c { position: relative; width: 50%; backface-visibility: hidden; } .mybj .b { background-position: 66.666667% 0; transform-style: preserve-3d; } .mybj .b:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; transform: rotateY(180deg) translateZ(1px); transform-style: preserve-3d; backface-visibility: hidden; } .mybj .c { background-position: 100% 0; transform-origin: left; transition: transform 2s; } .mybj:hover .bc, .mybj:active .bc { transform: rotateY(-180deg) translateZ(-1px); transition: transform 2s; } .mybj:hover .c, .mybj:active .c { transform: rotateY(180deg) translateZ(2px); transition: transform 3s; }
结语
以上就是码云笔记今天为大家带来的纯 css3 实现纸张折叠效果源码,希望通过本文分享内容对大家在学习 css3 相关知识有帮助,更多源码分享请关注码云笔记前端教程。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS3 实现纸张折叠效果
码云笔记 » CSS3 实现纸张折叠效果