上次，我们一起研究了css3的2d模块，这次我们一起来看一下css3的3d模块。

　　首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。

　　不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。

　　在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3d模块的一种表现，当然要看到近大远小的3d效果，还需要在父元素上添加透视属性：transform:perspective（500px）;值为透视点到元素的距离，具体概念请看美术透视教学。。。。多说无益，上代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             margin: 0 auto;
  11.         }
  12.         .div1{
  13.             margin-top: 100px;
  14.             transform:perspective(500px) rotatey(0deg);
  15.             position: relative;
  16.             border:1px solid #000000;
  17.             background-color: #ff0000;
  18.         }
  19.         .div1 div{
    　　　　　　　transform:rotatey(45deg);
  20.             position: absolute;
  21.             font-size: 80px;
  22.             line-height: 200px;
  23.             text-align: center;
  24.             top: 0;
  25.             left: 0;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div class="div1">
  31.     <div class="div1_1">1</div>
  32. </div>
  33. </body>
  34.  
  35. </html>

效果图：

　　但是，你会发现当父元素转到90度的时候元素消失了，这就说明元素是没有厚度的。说明元素虽然具有了近大远小的透视属性，但本质上仍是2d的。

　　这是你需要添加transform-style:preserve-3d;样式来让元素在3d空间中转换。这样，元素就处在了3维的空间里，当父元素旋转90度，仍能看到里面的子元素。

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             margin: 0 auto;
  11.         }
  12.         .div1{
  13.             margin-top: 100px;
  14.             transform:perspective(500px) rotatey(0deg);
  15.             transform-style:preserve-3d;
  16.             position: relative;
  17.             border:1px solid #000000;
  18.         }
  19.         .div1 div{
  20.             background-color: #ff0000;
  21.             transform:rotatey(45deg);
  22.             position: absolute;
  23.             font-size: 80px;
  24.             line-height: 200px;
  25.             text-align: center;
  26.             top: 0;
  27.             left: 0;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <div class="div1">
  33.     <div class="div1_1">1</div>
  34. </div>
  35. </body>
  36.  
  37. </html>

效果图：　　

　　

　　上面，我们对3d转换模块有了一个初步的了解，下面我们一起做一个正方体，来整理一下3d模块的知识。

　　一步步来做着写太过麻烦，我就将过程写在代码的注释里，小伙伴们请见谅。代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>转换模块-正方体</title>
  6.     <style>
  7.  
  8.     *{
  9.         margin: 0;
  10.         padding: 0;
  11.         /*去除默认边距*/
  12.     }
  13.  
  14.     ul{
  15.         width: 200px;
  16.         height: 200px;
  17.         border: 1px solid #000;
  18.         box-sizing: border-box;
  19.         margin: 100px auto;
  20.         position: relative;
  21.         /*修改基本样式*/
  22.         transform: rotateY(45deg) rotateX(45deg);
  23.         /*旋转看看效果*/
  24.         transform-style: preserve-3d;
  25.         /*将父元素设置为3d空间*/
  26.     }
  27.     ul li{
  28.         list-style: none;
  29.         width: 200px;
  30.         height: 200px;
  31.         font-size: 60px;
  32.         text-align: center;
  33.         line-height: 200px;
  34.         position: absolute;
  35.         left: 0;
  36.         top: 0;
  37.         /*修改基本样式*/
  38.     }
  39.     ul li:nth-child(1){
  40.         background-color: red;
  41.         transform: translateX(-100px) rotateY(90deg);
  42.         /*将第一个l向左移动100像素，然后绕y轴旋转90度，形成左边的面*/
  43.     }
  44.     ul li:nth-child(2){
  45.         background-color: green;
  46.         transform: translateX(100px) rotateY(90deg);
  47.         /*将第一个2向右移动100像素，然后绕y轴旋转90度*，形成右边的面*/
  48.     }
  49.     ul li:nth-child(3){
  50.         background-color: blue;
  51.         transform: translateY(-100px) rotateX(90deg);
  52.         /*将第一个3向上移动100像素，然后绕x轴旋转90度，形成上面的面*/
  53.     }
  54.     ul li:nth-child(4){
  55.         background-color: yellow;
  56.         transform: translateY(100px) rotateX(90deg);
  57.         /*将第一个4向下移动100像素，然后绕x轴旋转90度*/
  58.     }
  59.     ul li:nth-child(5){
  60.         background-color: purple;
  61.         transform: translateZ(-100px);
  62.         /*将第一个5向后移动100像素，形成后面的面*/
  63.     }
  64.     ul li:nth-child(6){
  65.         background-color: pink;
  66.         transform: translateZ(100px);
  67.         /*将第一个l向前移动100像素，形成前面的面*/
  68.     }
  69.  
  70. </style>
  71. </head>
  72. <body>
  73. <ul>
  74.     <!--首先做好html布局，正方体有6个面，所以写了6个li-->
  75.     <li>1</li>
  76.     <li>2</li>
  77.     <li>3</li>
  78.     <li>4</li>
  79.     <li>5</li>
  80.     <li>6</li>
  81. </ul>
  82. </body>
  83. </html>

效果图：

　　这个方法比较好理解，理解了之后请看下一个，代码在下面：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             margin: 0 auto;
  11.             /*修改基本样式*/
  12.         }
  13.         .div1{
  14.             margin-top: 100px;
  15.             transform: perspective(400px) rotatex(0deg) rotatey(0deg);
  16.             /*拥有近大远小透视效果*/
  17.             transform-style: preserve-3d;
  18.             /*设置为3d空间*/
  19.             position: relative;
  20.             border:1px solid #000000;
  21.             animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
  22.             /*旋转动画*/
  23.         }
  24.         .div1 div{
  25.             position: absolute;
  26.             font-size: 80px;
  27.             line-height: 200px;
  28.             text-align: center;
  29.             top: 0;
  30.             left: 0;
  31.             /*内部样式*/
  32.         }
  33.         .div1_1{
  34.             transform: translatez(100px);
  35.             background-color: red;
  36.             /*向前移动100像素，作为最前面的面*/
  37.         }
  38.         .div1_2{
  39.             transform: rotatex(90deg) translatez(100px);
  40.             background-color:green;
  41.             /*绕x轴旋转90度，在z轴正方向移动100像素，作为上面的面*/
  42.             /*注：旋转时坐标系会跟着一起旋转，z轴原来是垂直屏幕向外的，绕x轴旋转90度以后就是在屏幕上向上的方向*/
  43.         }
  44.         .div1_3{
  45.             transform: rotatex(180deg) translatez(100px);
  46.             background-color: blue;
  47.             /*绕x轴旋转180度，这时z轴垂直屏幕向内，在z轴正方向移动100像素，作为后面的面*/
  48.         }
  49.         .div1_4{
  50.             transform: rotatex(270deg) translatez(100px);
  51.             background-color: purple;
  52.             /*绕x轴旋转270度，这时z轴向下，在z轴正方向移动100像素，作为下面的面*/
  53.         }
  54.         .div1_5{
  55.             transform: rotatey(90deg) translatez(100px);
  56.             background-color: pink;
  57.             /*绕y轴旋转90度，这时z轴向右，在z轴正方向移动100像素，作为右面的面*/
  58.         }
  59.         .div1_6{
  60.             transform: rotatey(270deg) translatez(100px);
  61.             background-color: yellow;
  62.             /*绕y轴旋转90度，这时z轴向左，在z轴正方向移动100像素，作为左面的面*/
  63.         }
  64.         @-webkit-keyframes xuanzhuan{
  65.             from{
  66.                 transform:perspective(400px) rotatex(0deg);
  67.             }
  68.             to{
  69.                 transform:perspective(400px) rotatex(360deg);
  70.             }
  71.         }
  72.         .div1:hover{
  73.             transform: perspective(400px) scale(1.5);
  74.             animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
  75.             /*有hover事件是动画暂停*/
  76.         }
  77.  
  78.     </style>
  79. </head>
  80. <body>
  81. <div class="div1">
  82.     <div class="div1_1">1</div>
  83.     <div class="div1_2">2</div>
  84.     <div class="div1_3">3</div>
  85.     <div class="div1_4">4</div>
  86.     <div class="div1_5">5</div>
  87.     <div class="div1_6">6</div>
  88. </div>
  89. <!--html标签布局-->
  90. </body>
  91. </html>

效果图：

　　这种写法只要理解了，写起来会更加的方便，而且不不用去考虑转换的角度不对会导致内容是反的，所以推荐这一种写法。当然这种写法在x轴和y轴一起旋转是也会造成内容的反转。

　　好了，这次的分享就到这里了，大家有什么疑问和建议可以在留言区跟我讨论，谢谢大家的观看。

HTML5和CSS3实现3D转换效果 CSS3的3D效果的更多相关文章

  1. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  2. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  3. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  4. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  5. CSS3带你实现3D转换效果

    前言 在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴.在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D ...

  6. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  7. CSS3 transform变形（3D转换）

    一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...

  8. CSS3的2D与3D转换

    2D和3D转换涉及到数学中的知识,作为一个数学专业的毕业生,不研究一下岂不是对不起自己的专业? 首先来看几个参数: 1.transform-origin:origin(起源,起点),也即变形的起点,在 ...

  9. CSS3 基本属性 浅析（含选择器、背景阴影、3D转换、动画等）

    1渐进增强原则 2私有前缀  不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试:     Chrome浏览器:-webkit-border-radius: 5px;   ...

  10. CSS3中的2D和3D转换知识介绍

    一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...

随机推荐

  1. Swiper3 的特色功能

  2. spdlog源码阅读 (1): sinks

    0. spdlog简单介绍 spdlog 是一个快速的 C++ 日志库,只包含头文件,兼容 C++11.项目地址 特性: 非常快 只包含头文件 无需依赖第三方库 支持跨平台 - Linux / Win ...

  3. BootStrap入门教程 (三)

    本文转自 http://www.cnblogs.com/ventlam/archive/2012/06/05/2524966.html 上讲回顾:Bootstrap的基础CSS(Base CSS)提供 ...

  4. CSS.06 -- 尚合网页模拟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CCNA网络工程师学习进程（10）NAT的配置

     NAT(Network Address Translation,网络地址转换)是将IP 数据包头中的IP 地址转换为另一个IP 地址的过程.     (1)NAT简介:     在实际应用中,NAT ...

  6. iwebshop里面传数组且输出

    //php后台 $starttimestr = $arr[0]['forea_time']; $endtimestr = $arr[0]['end_time']; $data['starttime'] ...

  7. vertical-align用法

    父元素下面有两个子元素,第一个子元素设置display:inline-block,第二个子元素设置display:inline-block, vertical-align:top这样两个元素就能顶部对 ...

  8. 【C语言】浅谈可变参数与printf函数

    一.何谓可变参数 int printf( const char* format, ...); 这是使用过C语言的人所再熟悉不过的printf函数原型,它的参数中就有固定参数format和可变参数(用& ...

  9. Android开发艺术2之Activity的启动模式

    Activity是Android的四大组件之一,他的重要性毋庸置疑,对于这么重要的一个组件,我们首先要知道这些都是由系统进行管理和回调的,要理解Activity的启动模式,我们首先来了解一下Andro ...

  10. AngularJS1.X学习笔记3-内置模板指令

    前面学习了数据绑定指令,现在开始学习内置模板指令.看起来有点多,目测比较好理解.OK!开始! 一.ng-repeat 1.基本用法 <!DOCTYPE html> <html lan ...