CSS3 3D案例的总结

如果要说是3D的基础概念，首先我就来说一说rotateX()、rotateY()、rotateZ()这几个属性

rotateX():对应的是3D模型中的X轴上的旋转，传入的参数如:rotateX(45deg)表示的是页面绕X轴顺时针旋转45度

rotateY():对应的是3D模型中的Y轴上的旋转，传入的参数如:rotateY(45deg)表示的是页面绕Y轴顺时针旋转45度

rotateZ():对应的是3D模型中的Z轴上的旋转，传入的参数如:rotateZ(45deg)表示的是页面绕Z轴顺时针旋转45度(必须提到的是Z轴是相对自己的正面)

请看下图:

这就是对3D的基础，明白这三点做起来会很简单。

perspective

根据我个人对这个属性的理解，这个属性的功能就有点像把平行光设置为聚焦光一样，我们可以知道这个属性相当于将默认的平行光置换成焦点光，如果是像perspective:500px，这个我们可以认为是光源离物体的距离是500px，这个数值如果是越大的话，那么等一下的物体呈现就会越小，反之越大。
下面给大家呈现几个示例。

1.反转

效果展示:

HTML:
  1. <body>
  2.   <div id="cont">
  3.       <div id="box"></div>
  4.       <div id="box1">
  5.         <img src="images/lunbo2.jpg">
  6.       </div>
  7.   </div>
  8. </body>
css:
  1. body{
  2.   background: rgb(88, 71, 71);
  3.   transform-style: preserve-3d;
  4.   perspective: 800px;
  5. }
  6. /*添加3D效果和视距*/
  7. #cont{
  8.   width: 300px;
  9.   height: 300px;
  10.   transform-style: preserve-3d;
  11.   margin: 100px auto;
  12.   transform: rotateY(0deg);
  13.   transition: all 2s;
  14. }
  15. /*设置3D，让他在2秒内执行完*/
  16. #cont:hover{
  17.   transform: rotateY(180deg);
  18. }
  19. /*设置hover时间*/
  20. #box{
  21.   width: 300px;
  22.   height: 300px;
  23.   line-height: 300px;
  24.   background: url(../images/lunbo3.jpg)no-repeat;
  25.   background-size:100% 100%;
  26.   margin: 0 auto;
  27.   font-size: 150px;
  28.   text-align: center;
  29.   color: #fff;
  30.   position: absolute;
  31.   backface-visibility: hidden;
  32. }
  33. /*这个是正面*/
  34. #box1{
  35.   width: 300px;
  36.   line-height: 300px;
  37.   transform: rotateY(-180deg);
  38. }
  39. /*这个是反面*/
  40. #box1 img{
  41.   width: 100%;
  42.   height: 300px;
  43. }
这就是旋转，是沿着Y轴旋转了180度。接下来就结合一下上面所提到的一个坐标轴的相对位置问题来接一个例子。

2.正方体

效果展示:

HTML:
  1. <body>
  2.   <div id="box">
  3.     <div id="cont"class="cont">
  4.       <div class="mian">
  5.         <img src="images/tp.jpg">
  6.       </div>
  7.       <div class="mian">
  8.         <img src="images/tp2.jpg">
  9.       </div>
  10.       <div class="mian">
  11.         <img src="images/tp3.jpg">
  12.       </div>
  13.       <div class="mian">
  14.         <img src="images/tp4.jpg">
  15.       </div>
  16.       <div class="mian">
  17.         <img src="images/tp5.jpg">
  18.       </div>
  19.       <div class="mian">
  20.         <img src="images/tp6.jpg">
  21.       </div>
  22.     </div>
  23.   </div>
  24. </body>

CSS:

  1. body{
  2.     background: rgb(125, 102, 119);
  3. }
  4. #box{
  5.   transform-style: preserve-3d;
  6.   perspective: 800px;
  7. }
  8. /*添加3D效果和视距*/
  9. .cont{
  10.   width: 200px;
  11.   height: 200px;
  12.   margin: 150px auto;
  13.   position: relative;
  14.   transform-style: preserve-3d;/*添加3D*/
  15.   transform: rotateX(10deg) rotateY(10deg);
  16.   animation:ziz 10s infinite;/*绑定事件，让他在10秒内执行完*/
  17. }
  18. @keyframes ziz{
  19.     0%{
  20.         transform:rotate(0deg);
  21.     }
  22.     50%{
  23.         transform:rotateX(180deg);
  24.     }
  25.     70%{
  26.       transform: rotateY(180deg);
  27.     }
  28.     100%{
  29.         transform:rotateX(0deg);
  30.     }
  31. }
  32. /*事件*/
  33. .cont img{
  34.   width: 200px;
  35.   height: 200px;
  36. }
  37. .mian{
  38.   width: 200px;
  39.   height: 200px;
  40.   position: absolute;
  41. }
  42. /*下面设置的6个面，让它们以不同的角度选择拼接*/
  43. .mian:nth-child(1){
  44.   background: blue;
  45.   transform: rotateX(90deg) translateZ(100px);
  46. }
  47. .mian:nth-child(2){
  48.   background: rgb(32, 193, 40);
  49.   transform: rotateX(-90deg) translateZ(100px);
  50. }
  51. .mian:nth-child(3){
  52.   background: red;
  53.   transform: rotateY(-90deg) translateZ(100px);
  54. }
  55. .mian:nth-child(4){
  56.   background: yellow;
  57.   transform: rotateY(90deg) translateZ(100px);
  58. }
  59. .mian:nth-child(5){
  60.   background: #3ce8af;
  61.   transform:translateZ(100px);
  62. }
  63. .mian:nth-child(6){
  64.   background: #e476a3;
  65.   transform:translateZ(-100px) rotateY(180deg);
  66. }
首先我给它们都设置了 3D 空间，perspective这个是所谓的视距，接下来我给正方形 设置了6个面，各让它们沿着 rotateX rotateY translateZ 进行调整，然后组成一个现在所看到的3D 正方体。

3.旋转

效果展示:

HTML:
  1. <body>
  2.   <div class="cont" id="xj">
  3.     <div class="box" id="box">
  4.       <div class="mian">
  5.         <img src="images/lunbo1.jpg">
  6.       </div>
  7.       <div class="mian">
  8.         <img src="images/lunbo2.jpg">
  9.       </div>
  10.       <div class="mian">
  11.         <img src="images/lunbo3.jpg">
  12.       </div>
  13.       <div class="mian">
  14.         <img src="images/lunbo1.jpg">
  15.       </div>
  16.       <div class="mian">
  17.         <img src="images/lunbo2.jpg">
  18.       </div>
  19.       <div class="mian">
  20.         <img src="images/lunbo3.jpg">
  21.       </div>
  22.       <div class="mian">
  23.         <img src="images/lunbo4.jpg">
  24.       </div>
  25.       <div class="mian">
  26.         <img src="images/lunbo3.jpg">
  27.       </div>
  28.       <div class="mian">
  29.         <img src="images/lunbo2.jpg">
  30.       </div>
  31.     </div>
  32.   </div>
  33. </body>

CSS:

  1. body{
  2.   background: rgb(123, 235, 238);
  3. }
  4. .cont{
  5.   transform-style: preserve-3d;
  6.   perspective: 800px;
  7. }
  8. /*添加3D和视距*/
  9. .box{
  10.   width: 200px;
  11.   height: 200px;
  12.   margin: 100px auto;
  13.   position: relative;
  14.   transform-style: preserve-3d;/*添加3D*/
  15.   transform: rotateX(-10deg) rotateY(0deg) translateZ(-300px);
  16.   transform-origin: center center -300px; /*设置眼睛的位置*/
  17.   line-height: 200px;
  18.   transition:all 1s;/*在1秒内执行完*/
  19. }
  20. .box img{
  21.   width: 100%;
  22.   height: 100%;
  23. }
  24. .mian{
  25.   width:200px;
  26.   height: 200px;
  27.   position: absolute;
  28.   background-color: black;
  29.   font-size: 100px;
  30.   color: #fff;
  31.   text-align: center;
  33. }
  34. /*下面是9个div让它们rotateY的角度拼接成一个多边形*/
  35. .mian:nth-child(1){
  36.   transform: rotateY(0deg) translateZ(275px);
  37. }
  38. .mian:nth-child(2){
  39.   transform: rotateY(40deg) translateZ(275px);
  40. }
  41. .mian:nth-child(3){
  42.   transform: rotateY(80deg) translateZ(275px);
  43. }
  44. .mian:nth-child(4){
  45.   transform: rotateY(120deg) translateZ(275px);
  46. }
  47. .mian:nth-child(5){
  48.   transform: rotateY(160deg) translateZ(275px);
  49. }
  50. .mian:nth-child(6){
  51.   transform: rotateY(200deg) translateZ(275px);
  52. }
  53. .mian:nth-child(7){
  54.   transform: rotateY(240deg) translateZ(275px);
  55. }
  56. .mian:nth-child(8){
  57.   transform: rotateY(280deg) translateZ(275px);
  58. }
  59. .mian:nth-child(9){
  60.   transform: rotateY(320deg) translateZ(275px);
  61. }
这个是根据上面的排版一样也是调整了他们的 rotateX rotateY translateZ 。然后加入了JS里面的鼠标点击事件，让它们沿着X轴旋转。

4.卡片翻阅

效果展示：

HTML:
  1. <body>
  2.   <div id="box">
  3.     <div id="box1">
  4.       <div class="hz">
  5.         <img src="images/tp.jpg">
  6.       </div>
  7.       <div class="hz">
  8.         <img src="images/tp2.jpg">
  9.       </div>
  10.       <div class="hz">
  11.         <img src="images/tp3.jpg">
  12.       </div>
  13.       <div class="hz">
  14.         <img src="images/tp4.jpg">
  15.       </div>
  16.       <div class="hz">
  17.         <img src="images/tp6.jpg">
  18.       </div>
  19.       <div class="hz">
  20.         <img src="images/tp5.jpg">
  21.       </div>
  22.     </div>
  23.   </div>
  24.   <div class="btn">
  25.     <input type="button" value="下" id="btn">
  26.     <input type="button" value="上" id="up">
  27.   </div>
  28. </body>

CSS:

  1. body{
  2.   background: rgb(197, 231, 143);
  3. }
  4. #box{
  5.   transform-style: preserve-3d;
  6.   perspective: 800px;
  7. }
  8. /*添加3D和视距*/
  9. #box1{
  10.   width: 300px;
  11.   height: 300px;
  12.   margin: 100px auto;
  13.   position: relative;
  14.   text-align: center;
  15.   line-height: 300px;
  16.   font: 150px/2 Microsot Yahei;
  17.   color: #fff;
  18.   transform-style: preserve-3d;/*添加3D*/
  19. }
  20. #box1 img{
  21.   width: 100%;
  22.   height: 100%;
  23. }
  24. .hz{
  25.   width: 100%;
  26.   height: 100%;
  27.   background: red;
  28.   position: absolute;
  29.   transform-origin: bottom;/*设置的眼睛在下面*/
  30.   transform: rotateX(0deg);
  31.   transition: all 2s;/*设置时间*/
  32.   backface-visibility: hidden;/*隐藏背面*/
  33. }
首先让它rotateX(-90deg)以后，貌似是隐藏了，实际上是和人的视觉平行了，比方说一个很扁的物品，当和人的视觉平行以后，很难看到存在的东西。

5.魔方

效果展示：

HTML:
  1. <body>
  2.   <div id="box"></div>
  3. </body>
  1. var box=document.getElementById('box');
  2. var geshu=6;//渲染的个数
  3. var xr='<div class="box1"><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div></div>';
  4. var str='';
  5. for (var i = 0; i < geshu; i++) {
  6.   str+=xr;
  7. }
  8. box.innerHTML=str;
  9. //渲染完毕
  10. var wutai=box.getElementsByClassName('box1');
  11. console.log(wutai);
  12. var cishu=0;
  13. box.onclick=function() {
  14.   cishu++;
  15.   var jiaodu=cishu*90;
  16.   for (var i = 0; i < geshu; i++) {
  17.     wutai[i].style="transition:transform 1s "+100*i+"ms;transform:rotateX("+jiaodu+"deg)";
  18.   }
  19. }
CSS:
  1. body{
  2.   background: rgb(164, 239, 241);
  3. }
  4. #box{
  5.   width: 600px;
  6.   height: 250px;
  7.   margin: 150px auto;
  8.   perspective: 800px;
  9.   perspective-origin: 500px;
  10. }
  11. .box1{
  12.   width: 100px;
  13.   height: 100%;
  14.   float: left;
  15.   position: relative;
  16.   transform-style: preserve-3d;
  17.   margin-left: -1px;
  18. }
  19. /*这几个是让背景图片拼接，以它们的宽来定义的，background-position这个属性可以移动背景图片的位置*/
  20. .box1:nth-child(2)>.mian{
  21.   background-position: -100px 0;
  22. }
  23. .box1:nth-child(3)>.mian{
  24.   background-position: -200px 0;
  25. }
  26. .box1:nth-child(4)>.mian{
  27.   background-position: -300px 0;
  28. }
  29. .box1:nth-child(5)>.mian{
  30.   background-position: -400px 0;
  31. }
  32. .box1:nth-child(6)>.mian{
  33.   background-position: -500px 0;
  34. }
  35. .mian{
  36.   width: 100%;
  37.   height: 100%;
  38.   position: absolute;
  39. }
  40. /*下面是设置的6个div给它们加了背景图片*/
  41. .mian:nth-child(1){
  42.   transform: translateZ(125px);
  43.   background: url(../images/lunbo1.jpg) no-repeat;
  44.   background-size: 600px 100%;
  45. }
  46. .mian:nth-child(2){
  47.   transform: translateZ(-125px);
  48.   background: url(../images/lunbo2.jpg) no-repeat;
  49.   background-size: 600px 100%;
  50. }
  51. .mian:nth-child(3){
  52.   width: 250px;
  53.   transform: rotateY(-90deg) translateZ(125px);
  54.   background-color: black;
  56. }
  57. .mian:nth-child(4){
  58.   width: 250px;
  59.   transform: rotateY(90deg) translateZ(-25px);
  60.   background-color: black;
  62. }
  63. .mian:nth-child(5){
  64.   transform: rotateX(90deg) translateZ(125px);
  65.   background: url(../images/lunbo3.jpg) no-repeat;
  66.   background-size: 600px 100%;
  67. }
  68. .mian:nth-child(6){
  69.   transform: rotateX(-90deg) translateZ(125px);
  70.   background: url(../images/lunbo4.jpg) no-repeat;
  71.   background-size: 600px 100%;
  72. }
看起来很炫是不是，这个其实的制作原理就是按照我在上面提到的这些属性去制作的，首先我们分析一下，在创建这个的时候，第一步我们要加入视距，然后是添加一个3D的舞台，接着是把这些风景的图片边缘相接，最后在这些图片的每个舞台定义一个动画，就是在鼠标点击的时候触发的动作，这样这个就制作完成了，在这个例子中图片的尺寸最好要相同。

总结：

在学习的这段时间里，我对css3 有了更深刻的理解，对于transform的这个属性来说，它是根据你的想法去改变的。但是必须提到的一点是对于3D空间的理解，他可以让你看到你想要的结果，总而言之我们要实打实的学好每一个属性。

CSS3 3D的总结（初学者易懂）的更多相关文章

  1. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  2. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  3. CSS3 3D轮播主要可以分成这样的三类

    中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...

  4. css3 3D旋转效果

    css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...

  5. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  6. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  7. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  8. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  9. CSS3 3D变换

    可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...

随机推荐

  1. iOS真机调试配置

    啊!生活不易啊~~~~据说这个过程都可以当做简历技能了... 准备:已经具备了企业开发者账号,和相关证书 目标:让爪机可以真机调试 过程:1.登录官方开发网站 https://developer.ap ...

  2. [Angular Tutorial] 13 -REST and Custom Services

    在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...

  3. Yii实现Password Repeat Validate Rule

    在使用Yii时遇到这样的需求:在一个注册的页面输入两次密码,并验证两次输入是否一致.可是password的repeat的字段在数据库 并不存在.问题来了,如何创建一个password_repeat的属 ...

  4. iOS 加载动态库报错问题

    dyld: Library not loaded: @rpath Referenced from: Reason: no suitable image found.  Did find: 要么使用静态 ...

  5. 开始Java学习（Java之负基础实战）

    开发平台: JavaSE:java标准平台,一般用于桌面程序开发 JavaEE:开发web(如网站+Sping) JavaME:开发移动应用 开发环境: JVM:跨平台核心. JRE:java运行时, ...

  6. HDU-5123-who is the best?

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5123 水题一个,直接hash: 代码 #include<stdio.h>#include& ...

  7. 按钮（Buton）组价的功能和用法

    Button继承了TextView,它主要是在UI界面上生成一个按钮,该按钮可以供用户单机,当用户单击按钮时,按钮会触发一个onClick事件. 按钮使用起来比较容易,可以通过为按钮指定android ...

  8. spring mvc在Controller中获取ApplicationContext

    spring mvc在Controller中获取ApplicationContext web.xml中进行正常的beans.xml和spring-mvc.xml的配置: 需要在beans.xml中进行 ...

  9. 排查问题所用到的一些Linux命令实践（不定期更新。。）

    一.前言 线上问题排查可能是每个程序员都会经历的.在排查的过程中,往往会用到很多Linux命令,也会产生一些很实用的技巧.本博文通过分析一次线上问题排查的过程,把所有用到的命令串起来.每个Linux命 ...

  10. POJ2187(旋转卡壳)

    Beauty Contest Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 35459   Accepted: 10978 ...