一、序

博主最近这些天，突发奇想的想研究一下CSS3的东西，从而提升一下CSS的能力，在学习的过程中发现其实CSS3是一个挺复杂的东西，深入的研究，你可能会涉及到初中的光学理论来帮助理解一些概念，同时如matrix可能还需要你用大学学习的矩阵来进行分析，因为这是本系列的第一篇文章，所以就从最好玩的开始介绍起，这样也不至于让大家失去了阅读下去的兴趣，同时写这些文章的一个主要的原因是，CSS3挺复杂的，一方面整理一下自己的研究，方便日后重新的翻看，另一方面，也想帮助更多的读者而来进入CSS3这个世界，提高读者们的见识，不要像博主以前一样，以为会了几个标签就好像CSS3的东西都会了一样。

二、3D基础概念理解

如果要说是3D的基础概念，那么有一些属性的理解是一定绕不过去的，首先我们就来谈一谈rotateX()、rotateY()、rotateZ()这几个属性

rotateX()、rotateY()、rotateZ()

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

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

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

对应的模型如下：

 注：以上模型图的视角是+Z轴指向读者的方向

说到这里还需要注意这几个问题，就是页面(图中的菱形表示的就是页面)与坐标轴的位置是相对位置，不是绝对位置，也就是说页面位置一改变，坐标轴的位置也随着页面一起改变，这个你现在可能还不是很理解这个说法的作用，但是不用着急，如果弄个例子的话，例子会涉及到另外的一个属性的使用，所以先在这里买一个关子。二、旋转到与视线对其的方向的时候会出现消失的现象

HTML代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo1</title>

</head>

<style type="text/css">

    #test{

        height:200px;

        width:200px;

        position:absolute;

        margin-top:100px;

        margin-left:100px;

    }

    #test div{

        height:200px;

        width:200px;

        background:lightblue;

        -webkit-transition: all .6s;

    }

    #test div:hover{

        -webkit-transform:rotateX(90deg);

    }

</style>

<body>

    <div id="test">

        <div></div>

    </div>

</body>

</html>

效果展示：

看到了没有，这个出现空白是因为，当与你的视线是平行的时候，因为平面是没有厚度的所以你看到的就是空白

旋转方面的属性我们已经讲解了，接下来我们就来讲解一下，3D平移的属性，3D的平移属性分别有：translateX()、tanslateY()、tanslateZ()这三个方法

分别就是对应的是X、Y、Z轴方向上面的平移，这个具体参照上面的坐标图，很容易理解的，这个就不必在此多此一举了，以translateX()为例来讲解一下使用方法，如果是要使平面在X轴正方向上面移动45像素，这个时候可以这样写 translateX(45px)，其他的使用方法一样，接下来就结合一下上面所提到的一个坐标轴的相对位置问题来接一个例子，也作为translate这一系列属性的一个DEMO

HTML代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo1</title>

</head>

<style type="text/css">

    #test{

        height:200px;

        width:200px;

        position:absolute;

        margin-top:100px;

        margin-left:100px;

    }

    #test #div2{

        height:200px;

        width:200px;

        background:lightcoral;

        -webkit-transition: all .6s;

        position:relative;

        -webkit-transform:rotateX(-80deg) translateZ(200px);

    }

    #test:hover #div2{

        -webkit-transform: rotateX(80deg);

    }

</style>

<body>

    <div id="test">

        <div id="div2"></div>

    </div>

</body>

</html>

效果展示：

由于id=test定义的是margin-left等于margin-top的，但是由于div2中进行了移动的操作，造成了初始化页面红色矩形的margin-top>margin-left，但是细心的你有没有发现，参照上图的3D坐标轴，要使平移的应该是设置rotateY()才对，怎样这里是用过设置rotateZ()来实现的，哈哈，想看结果的请看下面分析

其实我们可以这样分析：

图像中应用了rotateX(-90deg)——也就是说明了图像目前是与我们的视线是平行的，从3D图中我们可以看出，Z轴总是与页面的关系是垂直关系，所以这个时候的Z轴就变成了变换之前的Y轴，所以变换后我们直接操作Z轴就可以起到操作Y轴的作用

三、3D知识点进阶

看到这里我默认读者都已经理解了上面的基础知识点了，毕竟上面的知识点还算是比较好上手的，接下来就是3D属性中一些比较难以理解的属性的讲解，这里会使用通俗的说法来进行说明、阐述观点，如有错误，希望各位同行指出

1、perspective

这个属性具体要怎样描述请自行百度，但是根据我个人对这个属性的理解，这个属性的功能就有点像把平行光设置为聚焦光一样，具体请看下图的分析

注：图片比较难找，大家将就一下

从图中我们可以知道这个属性相当于将默认的平行光置换成焦点光，如果是像perspective:200px，这个我们可以认为是光源离物体的距离是200px，这个数值如果是越大的话，那么等一下的物体呈现就会越小，就如图中来讲，如果是设置为200px会比设置为300px所呈现的书本的大小会更大些，但是如果是物体的Z轴(假设这个时候的物体没有旋转过)的数值大于大于焦点的距离，打个比方就是假设perspective:200px .math_book{-webkit-transform:translateZ(300px)},这个时候就会出现math_book在光源的后面，也就是光源没有覆盖到的地方，这个时候你是在页面中什么效果都没有呈现的，

这个时候不知道各位看官们还能不能理解这段话的意思呢!不懂没有关系，下面通过一个示例来分析一下光源理论是怎样得出来的

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo1</title>

</head>

<style type="text/css">

    #test{

        width:400px;

        height:400px;

        position:absolute;

        margin-left:100px;

        margin-top: 100px;

        /* 光源设置为离页面200像素的位置 */

        perspective:200px;

    }

    #test1{

        width:400px;

        height:400px;

        position:relative;

        /* 相当于指定一个3D的空间 */

        transform-style:preserve-3d;

    }

    #div2{

        width:400px;

        height:400px;

        position:relative;

        background:lightcoral;

        /* 指定变换效果，变换时间为1S */

        -webkit-transition: all 1s;

    }

    #test #test1:hover #div2{

        /* 绕Y轴旋转180度 */

        -webkit-transform: rotateY(180deg);

    }

</style>

<body>

    <div id="test">

        <div id="test1">

            <div id="div2"></div>

        </div>

    </div>

</body>

</html>

效果展示

注：图片有点大，但是也是没有办法的

这个案例中有几点在这里要说明，不知道大家知不知道为什么会出现旋转的好像要与屏幕相撞的原因？其实这个是博主故意这样做得，我在上面的例子中把光源的位置设置为200px但是我们从设置可以知道矩形的宽是400px,旋转的Y轴位置默认的是与Y轴平行，并且穿过中心点，所以我们也就知道了这个旋转半圆的半径是200px，所以这样就导致了光源点与矩形在矩形旋转到90度的时候相碰撞，所以这个时候，我们可以将光源点的位置设置的更远一些，比如说是500px或者是更大，但是这个时候我们应该要注意一点就是，如果设置过大的话，会导致图形在页面中的呈现变小了

对了，我还没有说明我的光源理论来的，不好意思，下面就来聊聊我自己的光源理论(理论是博主自己的心得来的，有错希望各位大神指出)，上图

已知手电筒是发散的光源（即非平行光），如果这个时候有一个物体(图中对应的是BOOK)绕着Y轴在旋转，，那么我们假设在这本书的后面有一面墙，那么墙最后呈现的效果是出现了一个菱形，这个与我们看到的GIF图像在每帧位置上面相对应。实际上，上面的图像说到底也就是菱形的变换然后套接一个animate。如果是没有设置perspective属性，那么就会出现我说所的平行光的效果,平行光效果，请看下图

相信大家都看出来是什么效果吧，就是平行光效果就是说：如果是平行光照射到物体上面，即使物体绕着Y轴旋转，那么最后在页面上呈现的效果也是一个矩形边框的变

perspective属性就说到这里了，在上面的例子中我们还提到了另外的一个属性就是 transform-style:preserve-3d;这个属性其实就相当于创建一个3D的空间

我们这里就来假设一下，假设perspective对应的是发散光源，transform-style对应的是一个舞台，如果舞台是一个2维的也就是像电视一样的，那么这样最后也产生不来一个3D的效果，但是如果舞台是一个3D，例如舞台是一个京剧舞台，那么这个3D的舞台投影上就可以看到3维的变化，所以我们急需要perspective属性来设置"光源"类型,也需要transform-style来设置一个投影的3D空间.

在使用perspective的时候我们需要注意的是如果把这个属性加在某些具体元素上面并且旋转的角度相同，那么这些元素所呈现的效果是相同的，这个正好可以用perspective类比为光源来解释，如果在每个对象上面加上个一个光源，那么投影就是一样的，但是如果是加在这些元素的父节点上面，那么元素所呈现的效果是不同的，这个的解释是我们把光源加在这些元素上面，那么我们可以把这些元素看成是一个这些元素都在一个平面上面，那么因为因为光源的位置是一定的，但是每个元素在平面上面的位置不一样，所以呈现的就是不同的效果(这个可能比较抽象难以理解，如果有疑问的话可以在后面留言)

perspective-orgin:这个属性相当于是设置坐标的原点，因为默认的原点是在图像的中心位置，但是有时候我们可能像旋转的中心的位置变换一下，这个时候，这个属性就可以满足我们的需求

backface-visibility：这个属性是用来设置3D的背景是不是透明的，选项有visible|hidden，默认的是hidden

如果还是有不太明白的话，具体可以参照张鑫旭的好吧，CSS3 3D transform变换，不过如此！看完之后再来看这篇文章可能会对你的理解上有一个提升帮助

四、案例练习

先来看一下效果：

看起来很炫是不是，这个其实的制作原理就是按照我在上面提到的这些属性去制作的，首先我们分析一下，在创建这个的时候，第一步我们要引入光源，然后是添加一个3D的舞台，接着是把带猴子的图片放在垃圾桶图片的下面并且边缘相接，最后在这些图片的父类定义一个动画，就是在鼠标悬停的时候出发的动作，这样这个就制作完成了，对了在这个例子中图片的尺寸最好要相同(里面这些图是博主在网上找的)

具体的HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3练习案例</title>

</head>

<style type="text/css">

    *{

        margin:0px;

        padding:0px;

    }

    .light{

        margin-top:200px;

        margin-left: 200px;

        width:310px;

        height:100px;

        position:absolute;

        perspective:500px;

    }

    .light .stage{

        position:relative;

        width:310px;

        height:100px;

        transform-style:preserve-3d;

        -webkit-transition: all 0.8s;

    }

    .light .stage .image1{

        width:310px;

        height:100px;

        position:absolute;

        -webkit-transform:translateZ(50px) ;

        -webkit-transition: all 0.8s;

    }

    .light .stage .image2{

        width:310px;

        height:100px;

        position:absolute;

        -webkit-transition: all 0.8s;

        -webkit-transform: rotateX(-90deg) translateZ(50px);

    }

    .light .stage:hover{

        -webkit-transform: rotateX(90deg);

    }

</style>

<body>

    <div class="light">

        <div class="stage">

            <img class="image1" src="data:images/a.png" />

            <img class="image2" src="data:images/b.jpeg" />

        </div>

    </div>

</body>

</html>

图片我就不提供了，请自行百度上找

五、总结

这节我们梳理了CSS3中3D效果制作的一些标签以及通过一个小小的案例来分析标签是怎样使用的，如果有那个地方是由说错的，希望各位不吝笔墨，告诉我一声，谢谢

CSS3系列之3D制作的更多相关文章

  1. CSS3系列之3D制作 再研究

    水平翻转效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  2. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5+CSS3系列教程——如何制作简单按钮笔记

      1.按钮的制作方式 用图片(目前用的不多) 纯CSS a标签 input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮 butto ...

  4. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. 技术分享: CSS3 系列

    技术分享: CSS3 系列 css 一键换肤 css 打印样式,媒体查询 css 禁用选择 css 性能优化 css 计算单位 css 3D 特效 refs xgqfrms 2012-2020 www ...

  7. ZAM 3D 制作简单的3D字幕 流程(二)

    原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...

  8. ZAM 3D 制作3D动画字幕 用于Xaml导出

    原地址-> http://www.cnblogs.com/yk250/p/5662788.html 介绍:对经常使用Blend做动画的人来说,ZAM 3D 也很好上手,专业制作3D素材的XAML ...

  9. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

随机推荐

  1. 原生JS实战：分享一个首页进度加载动画！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  2. jQuery静态方法globalEval使用和源码分析

    Eval函数大家都很熟悉,但是globalEval方法却很少使用,大多数参考手册也没有相关api,下面就对其用法和源码相应介绍: jQuery.globalEval()函数用于全局性地执行一段Java ...

  3. iOS AutoLayout的用法

    添加约束 代码实现Autolayout的步骤 利用NSLayoutConstraint类创建具体的约束对象 添加约束对象到相应的view上 - (void)addConstraint:(NSLayou ...

  4. 基本排序算法——快速排序java实现

    简单的快速排序算法,我竟然花费了如此多的时间来写作,好好学习. /** * */ package basic.sort; import java.util.Arrays; import java.ut ...

  5. EA（企业架构）落地之道

    随着业务和IT的不断融合,企业业务.信息系统和技术结合日益紧密,企业对信息系统及技术的敏捷性要求越来越高.如何在多变的环境下快速创新产品或服务并推向市场是企业面临的日益紧迫的压力.企业架构作为连接和匹 ...

  6. android 双缓存机制

    废话不多说,直接贴代码! 所谓的双缓存,第一就是缓存在内存里面,第二就是缓存在SD卡里面,当你需要加载数据时,先去内存缓存中查找,如果没有再去SD卡中查找,并且用户可以自选使用哪种缓存! 缓存内存和缓 ...

  7. Oracle数据库安装图文操作步骤

    一.Oracle 下载 注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可. 路径名称中,最好不要出现中文,也不要出现空格等不规则字符.   官方下地址: http://www.o ...

  8. SQL Server 2008 标准版不支持Reporting Services的数据驱动订阅

    今天开发同事找我,说为什么Reporting Services服务器的报表管理的订阅选项里面只有"新建订阅"选项, 没有"数据驱动订阅"选项,说实话,我也基本上 ...

  9. MySQL frm+ibd文件还原data的办法【数据恢复】

    MySQL frm+ibd文件还原data的办法[数据恢复] 此方法只适合innodb_file_per_table          = 1 当误删除ibdata 该怎么办? 如下步骤即可恢复: 1 ...

  10. mysql-7 数据检索（5）

    联结(join) SQL最强大的功能之一就是能在数据检索查询的执行中联结(join)表.联结就是利用SQL的SELECT能执行的最重要的操作. 例子:此例子包含两个表,一个表是vendors , ve ...