transform

transform属于CSS属性
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

在网页中需要制作一些有立体感的3d效果，比如书本翻页

tansform中有一个rotate旋转属性

属性	功能
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

书本的翻页主要围绕书本轴线进行左右翻动书本

例子为书本从合起状态到打开状态
首先定义一本书本div

<style>.outbookPage {margin: 100px auto;width: 586px;height: 632px;perspective: 2000px;background:gray ;box-shadow: 0 0 10px #999;}
</style>
<div class="outbookPage">
</div>

效果：

在此div中设置好perspective，这是用户相对于屏幕的远近距离，之后翻页效果出现时perspective值越近，翻转效果越明显。

在outbookPage中编写要进行旋转的子div元素

<style>.outbookPage {margin: 100px auto;width: 586px;height: 632px;perspective: 2000px;background:gray ;box-shadow: 0 0 10px #999;}.innerBookPage {width: 100%;height: 100%;background-color: #333333;/* 向外面旋转  */transform: rotateY(-40deg); transform-origin: 0 0;font-size: 40px;text-align: center;color: white;z-index: 5;}
</style>
<div class="outbookPage"><div class="innerBookPage">封面</div>
</div>

效果：当前为静态效果，如果想要制作完整的动画翻页效果可以使用animation，但是需要注意的是animation只能支持IE10+。
tansform:rotateY( 定义的角度 ) 代表让div元素绕Y轴进行3d旋转。 rotateY也只支持IE10+
在封面div旋转到背面之后可以使用backface-visibility: hidden; 对背面进行隐藏。
此时封面旋转到一般就消失了

为了让封面旋转到一半后消失出现第一页，可以给封面div添加兄弟元素，即第一页的div。

注意此处第一页的div需要进行180度翻转，这样旋转之后才能正向显示。
同样需要进行背部隐藏： backface-visibility: hidden;

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.outbookPage {margin: 100px auto;width: 586px;height: 632px;perspective: 2000px;background:gray ;background-position: 100% 0%;box-shadow: 0 0 10px #999;}.innerBookPage {width: 100%;height: 100%;background-color: #333333;/* 向外面旋转  */transform: rotateY(-20deg); transform-origin: 0 0;animation: openbook 3s forwards;font-size: 40px;text-align: center;color: white;backface-visibility: hidden;z-index: 5;}.innerfirstPages {width: 100%;height: 100%;background: burlywood;background-size: 100% 100%;position: absolute;top: 0;left: -100%;font-size: 40px;text-align: center;animation: openbook2 3s forwards;transform: rotateY(180deg);transform-origin: 100% 0;backface-visibility: hidden;}@keyframes openbook{0%{transform: rotateY(0deg) scaleX(1);}100%{transform: rotateY(-180deg) scaleX(1);}}@keyframes openbook2{0%{transform: rotateY(180deg) scaleX(1);}100%{transform: rotateY(0deg) scaleX(1);box-shadow: 0 0 10px #999;}}</style></head><body><div class="outbookPage"><div class="innerBookPage">封面</div><div class="innerfirstPages">第一页内容1111111111111222222222222222</div></div></body>
</html>

效果：

使用transform制作书本翻页效果相关推荐

unity 制作书本翻页效果
unity 制作书籍翻页效果 unity C# 翻书效果 2D 真实翻页不使用插件自制实现思路: 将书本分为两边,一边一个翻页实现: 下图为书本的右面,以OA为分界线,△OAB是下一面的如上图的 ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
用Cocos Creator 模拟书本翻页效果
1.简介本文主要探讨了如何使用CocosCreator来模拟书本翻页效果,分别介绍了通过使用贝塞尔曲线和verlet积分算法来模拟书页底边在翻页过程中的弯曲形变,最后通过自定义assembler传入 ...
用 Cocos Creator 模拟书本翻页效果
本篇文章作者:乐府-贝塔乐府-贝塔:乐府前端核心开发,从事游戏开发多年,从 Cocos2d-x 做到 Cocos Creator,擅长渲染技术的相关优化.多年的前端开发经验激发了对技术研究的深厚兴趣 ...
css3实现书本翻页效果
css3翻页效果关键要点: 1.css3 3d动画的掌握 2.如何解决翻转后页面内容的改变 3.如何保持书本一直处于居中位置代码总览 <!DOCTYPE html> <html ...
核心动画实现书本翻页效果加载动画
经常看到一些很好的动画加载视图,闲来无事就写了一个书本翻页样式的动画加载视图,核心技术是CALayer+CoreAnimation.项目源码地址:https://github.com/China131 ...
css3的书本翻页效果
最近我们网站要上线一个页面,要做一个轮播.我一般接触的轮播,都是淡入淡出或者左右切入切出,那天产品说要做一个书的翻页的效果,就是书从一角掀起然后向着一个方向走的效果.跟带我的同事对了一下,他跟我说做一 ...
书本翻页效果 html+css
效果: 有些细节没处理好 ("▔□▔) 实现: 定义标签,shu是书本,feng是封面,wen是文字内容. <div class="shu"><div ...
【原创】书本翻页效果booklet jquery插件系列之简介
booklet jquery插件系列之简介本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...

使用transform制作书本翻页效果

transform

书本的翻页主要围绕书本轴线进行左右翻动书本

在此div中设置好perspective，这是用户相对于屏幕的远近距离，之后翻页效果出现时perspective值越近，翻转效果越明显。

为了让封面旋转到一半后消失出现第一页，可以给封面div添加兄弟元素，即第一页的div。

使用transform制作书本翻页效果相关推荐

最新文章

热门文章