网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例18知识点：3D变形_第1页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例18知识点：3D变形_第2页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例18知识点：3D变形_第3页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例18知识点：3D变形_第4页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例18知识点：3D变形_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

我们毕业啦其实是答辩的标题地方3D变形3D变形2D变形表示元素在X轴和Y轴上产生的变化，3D变形是在2D变形的基础上加上Z轴的变化，它更加注重的是空间位置的变化，用于3D转换的函数如下表所示。3D变形在2D变形中已经详细介绍了平移、旋转、缩放方法，因此在3D变形中就不再一一介绍，以旋转为例简要说明它的使用方法。3D变形1.rotate3d()——3D旋转rotate3d()是rotateX()、rotateY()、rotateZ()的综合属性，用于定义多个轴的3D旋转，其语法格式如下：rotate3d(x,y,z,angle)；rotateY(angle)；3D变形例18-1在项目project18中新建一个网页文件，使用rotateX()实现元素围绕X轴的3D旋转变形，文件名：example01.html。3D变形2.perspective属性——设置3D透视效果perspective属性用于设置3D透视效果，该属性定义3D元素距视图的距离，以像素计。该属性允许改变3D元素来查看3D元素的视图。当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。3D变形例18-2在项目chapter18中新建一个网页文件，使用perspective设置透视效果，文件名：example02.html。3D变形上述代码中，对上面的盒子通过perspective属性设置透视效果，鼠标指针经过时的效果如图18-5所示；下面的盒子没有设置透视效果，鼠标指针经过时的效果如图18-6所示。可以看出，不设置透视效果，盒子旋转时则看不到立体旋转的效果。图18-5上面盒子的透视效果

图18-

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论