HTML5+CSS3+JavaScript Web前端开发案例教程课件：趣味电子书.pptxVIP

趣味电子书

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：趣味电子书核心功能：电子书样式电子书翻页特效

案例介绍趣味电子书效果

02技术准备

技术准备技术1：CSS3transform3D空间转换CSS3提供了transform属性，用于实现网页中的3D效果。当给元素使用transform之后，它就可以在它原来所在的位置变成一个向任意空间变换的元素，这里可以通过在Z轴上的设置，让他在空间上呈现3D效果。

技术准备transform属性的语法如下所示：transform:none|transform-functions;

技术准备在使用transform属性实现3D效果时，需要属性设置在父级元素上，transform属性的值如下：属性值描述属性值描述translate3d(x,y,z)定义3D转换translateX(x)定义转换，只是用X轴的值translateY(y)定义转换，只是用Y轴的值translateZ(z)定义3D转换，只是用Z轴的值scale3d(x,y,z)定义3D缩放转换scaleX(x)通过设置X轴的值来定义缩放转换scaleY(y)通过设置Y轴的值来定义缩放转换scaleZ(z)通过设置Z轴的值来定义3D缩放转换rotate3d(x,y,z,angle)定义3D旋转rotateX(angle)定义沿着X轴的3D旋转rotateY(angle)定义沿着Y轴的3D旋转rotateZ(angle)定义沿着Z轴的3D旋转

技术准备如果需要将某个元素设置沿Z轴上旋转，可以通过rotate3d()进行设置，示例代码如下所示：.demo-3d{transform:rotate3d(0,0,1,45deg);}

技术准备技术2：jQueryCSS控制jQuery提供了用于控制CSS的方法，这些方法包括：addClass()，向被选元素添加一个或多个类；removeClass()，从被选元素删除一个或多个类；toggleClass()，对被选元素进行添加、删除类的切换操作；css()，设置或返回样式属性。

技术准备示例代码：$(button).click(function(){$(p).addClass(blue);$(div).addClass(important);});

03案例实现

案例实现文件结构：