CSS3 3D制作实战案例分析制作实战案例分析
主要为大家详细分析了CSS3 3D制作实战案例分析，更好的巩固CSS3 3D的知识，理解3D的制作和实现原理,具有一定的参考价值，感兴趣
的小伙伴们可以参考一下
一、前言一、前言
上一节，介绍了基础的CSS3 3D动画原理实现，也举了一个小小的例子来演示，但是有朋友跟我私信说想看看一些关于CSS3 3D的实例，所以在这里为了满
足一下大家的需求，同时也为了以后能够更好的巩固CSS3 3D的知识，所以在这里写下这篇博文，希望能够帮助你更好的理解3D的制作和实现原理，同时也
欢迎各位小伙伴对文中的错误给予指正
二、入门案例分析二、入门案例分析
这里先说一说我的规划，我打算先从入门级的案例入手，然后依次递推，最后要达到的效果是，理解完所有的例子的设计思路，基本上CSS3-3D制作就能够随
心所欲。
1、矩形图片翻滚效果、矩形图片翻滚效果
这个效果比较简单，所以在这里就不多做解释了，先来复习一下上一节说的要创建一个3D环境，我们需要创建一个“灯光”，“舞台”，“演员”(相当于
perspective、preserve-3d、image)，不清楚的小伙伴请看这里,具体的代码如下：
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6. <style type="text/css">
7. div div img{
8. width:300px;
9. height:300px;
10. position:absolute;
11. /* -webkit-transition: all 0.8s; */
12. }
13. div div{
14. -webkit-transition: all 1s;
15. }
16. #img1{
17. -webkit-transform: translateZ(150px);
18. /* -webkit-transition: all 0.8s; */
19. }
20. #img2{
21. -webkit-transform: rotateX(-90deg) translateZ(150px);
22. /* -webkit-transition: all 0.8s; */
23. }
24. #img3{
25. -webkit-transform: rotateZ(180deg) translateZ(-150px);
26. }
27. #img4{
28. -webkit-transform: rotateX(90deg) translateZ(150px);
29. }
30. #img5{
31. -webkit-transform:rotateY(90deg) translateZ(150px);
32. }
33. #img6{
34. -webkit-transform: rotateY(-90deg) translateZ(150px);
35. }
36. /* div div:hover{
37. -webkit-transform: rotateX(270deg);
38. } */
39. </style>
40. </head>
41. <body>
42. <div style="margin-left: 100px;height:300px;width:300px;position:absolute;perspective: 1000px;">
43. <div id="box" style="transform-style: preserve-3d;height:300px;width:300px;position: relative;">
44. <img id="img1" src="1.jpg" />
45. <img id="img2" src="2.jpg" />
46. <img id="img3" src="3.jpg" />
47. <img id="img4" src="4.jpg" />
48. <img id="img5" src="5.jpg" />
49. <img id="img6" src="6.jpg" />
50. </div>
51. </div>
52. <div style="margin-left: 700px;margin-top: 100px;">
53. <input id="btn1" type="button" value="向上翻转90度" />
54. <input id="btn2" type="button" name="" value="向左翻转90度" />
55. <input id="btn3" type="button" value="向右翻转90度" />
56. <input id="btn4" type="button" name="" value="向下翻转90度" />
57. </div>
58. <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
59. <script>
60. var x=0;
61. var y=0;
62. var box=$("#box");
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38537777
- 粉丝: 4
- 资源: 966
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
