CSS3实现立体书效果

思路：利用CSS3中3D转换的perspective属性，通过左面和前面的旋转rotate、位移变化translate实现立体书的效果
具体可参考：HTML5+CSS3学习总结(完结)
该文章中的3D导航栏案例的思路

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立体书</title><style>.wrap{margin: 100px;width: 100px;height: 200px;perspective: 500px;}.box {position: relative;width: 100%;height: 100%;transition: all .5s;transform-style: preserve-3d;transform: rotateY(38deg);}.front,.left {position: absolute;top: 0;left: 0;line-height: 50px;text-align: center;}.front {width: 100%;height: 96%;background-color: lightgreen;transform: translateZ(23px);}.left {width: 20px;height: 100%;background-color: yellowgreen;transform: translateY(-4px) rotateY(-90deg);}</style>
</head><body><div class="wrap"><div class="box"><div class="left"></div><div class="front"></div></div></div>
</body></html>

效果如图

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~

CSS3实现立体书效果相关推荐

boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
[css] 请说说CSS3实现文本效果的属性有哪些？
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...
CSS3图片跳动效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS ...
css3 页面翻转效果.
css3 页面翻转效果. 从事手机前端开发也有段时间了,最近重习了css3,html5...做了些小例子. 演示示例在这里源码如下: 1: <html> 2: <head> ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
html鼠标元素效果,十五种css3鼠标hover效果
css3有哪些不错的hover效果 CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦效果一:360°旋转修改rotate(旋转度数) 01 * { 02 transit ...
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示下载资源: 16 次下载资源下载积分: 20 积分 function () { ...

CSS3实现立体书效果

示例

CSS3实现立体书效果相关推荐

最新文章

热门文章