<一>实现一个立体六边形
结果示例图：


示例代码：
.test{
      font-size:20px;
}
.container{
     width: 500px;
     height: 420px;
     position: relative;
     margin: 0 auto;
     padding-top: 200px;
     perspective: 3000px;  /*perspective属性定义3D元素距视距的距离，以像素计*/
     -webkit-perspective-origin-y: 330px;/*设置3D元素的基点位置*/
}
.carousel{
     width: 100%;
     height: 100%;
     position: absolute;
     transform-style: preserve-3d;/*子元素保留其3D位置*/
     transform: translateZ(-400px) rotateY(0deg);
}
.carousel div{
     width:350px;
     height:250px;
     background-color: rgba(138,224,232,0.5);
     display: block;
     position: absolute;
     left: 50%;
     margin-left: -150px;
}
.rotate-0{
    transform: rotateY(0deg) translateZ(400px);/* rotate定义旋转，rotateY定义沿Y轴旋转角度；translate定义转换，translateZ定义沿Z轴方向的转换 */
}
.rotate-1{
    transform: rotateY(60deg) translateZ(400px);
}
.rotate-2{
    transform: rotateY(120deg) translateZ(400px);
}
.rotate-3{
    transform: rotateY(180deg) translateZ(400px);
}
.rotate-4{
    transform: rotateY(240deg) translateZ(400px);
}
.rotate-5{
    transform: rotateY(300deg) translateZ(400px);
}



<div id="test">
	<div class="container">
        <div id="carousel" class="carousel">
            <div class="rotate-0"></div>
            <div class="rotate-1"></div>
            <div class="rotate-2"></div>
            <div class="rotate-3"></div>
            <div class="rotate-4"></div>
            <div class="rotate-5"></div>
        </div>
    </div>
</div>


注意：

利用 CSS3 新特性实现的 3D 元素 在IE上兼容性并不是很好，目前 transform-style：preserve3d 不支持IE，以下备注：
以下是在http://caniuse.com上搜到的几个属性在不同浏览器兼容性对比图（绿色为完全兼容，浅绿色为兼容一大部分，黄色为兼容一小部分，红色为完全不兼容）：

transform-style:





transform:




 这就是如何去利用CSS3实现一个立体六边形，我们下一步就是如何让这个立体六边形能够转动起来，实现一个转动的立体六边形 

 链接：《利用
 CSS3 实现一个转动立体六边形 <二>》

< 二 > 实现一个转动的立体六边形
结果示例图（因为录制工具的问题这个gif显得有些卡顿，在实际网页中并不会）：


示例代码：
.test{
    font-size:20px;
}
.container{
    width: 500px;
    height: 420px;
    position: relative;
    margin: 0 auto;
    padding-top: 200px;
    perspective: 2000px;
    -webkit-perspective: 2000px;
    perspective-origin-y: 100px;
    -webkit-perspective-origin-y: 100px;
}
.carousel{
    width: 100%;
    height: 100%;
    position: absolute; 
    transform-style: preserve-3d;
    transform: translateZ(-400px) rotateY(0deg);
    animation:rotate0 10s infinite linear; /* 添加动画名叫rotate0，持续10s,以线性持续运动*/
}
.carousel div{
    width:350px;
    height:250px;
    background-color: rgba(72,83,121,0.5);
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    font-size:80px;
    color:red;
    display:flex; 
    align-items:center;/*垂直居中*/ 
    justify-content: center;/*水平居中*/
}
.rotate-0{
    transform: rotateY(0deg) translateZ(400px);
}
.rotate-1{
    transform: rotateY(60deg) translateZ(400px);
}
.rotate-2{
    transform: rotateY(120deg) translateZ(400px);
}
.rotate-3{
    transform: rotateY(180deg) translateZ(400px);
}
.rotate-4{
    transform: rotateY(240deg) translateZ(400px);
}
.rotate-5{
    transform: rotateY(300deg) translateZ(400px);
}
@keyframes rotate0{ /* 动画rotate0 */
    from{
        transform: translateZ(-400px) rotateY(360deg);
    }to{
        transform: translateZ(-400px) rotateY(0deg);
    }
}

<div id="test">
	<div class="container">
        <div id="carousel" class="carousel">
            <div class="rotate-0">1</div>
            <div class="rotate-1">2</div>
            <div class="rotate-2">3</div>
            <div class="rotate-3">4</div>
            <div class="rotate-4">5</div>
            <div class="rotate-5">6</div>
        </div>
    </div>
</div>


注：

animation属性是一个简写属性，它有六个属性，分别是：

* animation-name：动画名称

* animation-duration：完成所定义动画曲线持续时间

* animation-timing-function：动画曲线

* animation-delay：动画开始之前的延迟时间

* animation-iteration-count：动画播放次数

* animation-direction：是否轮流反向播放动画



animation的兼容性：

本教程包含了简单的光影理解、体块构成，教你看似复杂，实则简单的2.5D插画创作。教程主要模拟守望先锋游戏里的场景图，推荐给朋友学习，希望大家可以喜欢。
先看看效果图
绘制步骤—
步骤 01
创作前，首先明确插画的主要内容，我以守望先锋各个地图中的一些建筑为主体，本次教程以【监测站：直布罗陀】A点建筑为创作来源。主要工具：【钢笔】、【对齐】、【直接选择】、【形状生成器】、【3D】、【偏移路径】等。
步骤 02
拿到图片后，分析画面的主要构成，我把它分为了三个大体块，首先是最明显的左边的复式建筑【建筑—左】和右边的发射塔【建筑—右】，以及一个【基座】，最为明显。
步骤 03
接着在画布上建立参考线。先用【直线工具】建立直线，直线数量为奇数。选中直线，【旋转】面板中点击复制，复制两次 60 度。直线数量为奇数，复制出来的直线会交叉组成正三角形;直线数量为双数，则会出现正六边形和正三角形，不利于绘画 2.5D 插图。
步骤 04
如何在参考线上建立角度合适的长方体，首先明确，线数正确的直线会交叉形成正三角形，6 个正三角形可以组成一个俯视的立方体，该立方体有三个能看见的面。在该参考线上去画任何长宽比的长方体，可见的面都是三个。
步骤 05
分析好结构的朝向，现在来确定光影。原图光线从左下方射入，所以左下方是受光面的最亮面。光线从左下方直线方向往右上方照射，所以顶面也是受光面，但亮度低于最亮面。即剩下的一个面为暗面。
步骤 06
在建立好的参考线上，依据步骤 4 用【钢笔】分别画出【建筑—左】、【建筑—右】、【基座】的结构朝向，确定好你所要画的长宽高。接着以色相的不同来区分不同的体块，附上步骤 5 的明暗关系。在这个步骤里不需要进行配色，只需要以不同的色相来表示出明暗即可。
步骤 07
调整具体的体块特征，用【钢笔】画出一些具体的结构(具体画法从步骤 8 开始讲解)。在长方体上，光照形成亮面、灰面、暗面。当受光面增多，亮暗关系增多，要注意区分光影层次，最亮的在哪，最暗的在哪。依照原图，有选择性地去选取要画的结构，概括成一个个有特征的形体，不要盲目地看到原图里有什么就画什么。
步骤 08
画【建筑—右】的发射塔时，首先，把发射塔区分结构，分为上部分的圆形和下部分的墩子。将两部分画完，再拼起来。先画上部分的圆形们，用【椭圆工具】按住 shift 摁住鼠标左键拖动鼠标，画一个正圆，找到【效果—3D—旋转】，调整角度————因为原图的发射塔朝向为右侧中间偏上，所以整个上部分的圆形们的朝向，也是朝右侧中间偏上。接着【对象—扩展外观】后右键点击【取消编组】，再次右键点击【释放剪贴蒙版】，将单个图形提取出来。在【对象—路径—偏移路径】中，调整数值做出同心圆。用不同的色相将不同的圆形部位先区分开来。
步骤 09
画一个正圆，找到【效果—3D—旋转】，调整角度，【对象—扩展外观】后右键点击【取消编组】，再次右键点击【释放剪贴蒙版】，将单个图形提取出来。将图形复制一个并依据参考线放在合适的角度(角度选择如步骤 8里所说)。选择【混合工具】，点击两个圆形，再双击【混合工具】的图标，在其面板上进行设置数值。在数值设置上，指定的步数或距离要使圆柱体的边缘看起来平滑。设置完后，扩展外观后【取消编组】，除去顶面的部分都进行【联集】，分出亮面、暗面。
步骤 10
画一个正圆，选择【直接选择工具】，点一下正圆，正圆会出现 4 个锚点，再点一下某一个锚点，即【选择了该锚点】，将其删除。接着选择【选择工具】，选中该图形右键点击【连接】，即为一个半圆。接着选择【3D—绕转】，点开【更多选项】，设置与画面同步的光源。球体可以先不扩展。
步骤 11
画圆柱体时，先画一个正圆，选择【3D—凸出和斜角】，位置选择【等角—上方】，调整凸出厚度，点开更多选项，混合步骤数值可以尽量调低，显示出的颜色越少越好，做完之后将单个图形提取出来。
步骤 12
画一个 1/4 圆，选择【3D—绕转】，位置【等角—左方】。与之前画的圆柱拼起来。
步骤 13
补充墩子的各个结构，将他们依照参考线拼起来。
步骤 14
将画好的发射塔上下部件依照参考线拼起来。
步骤 15
参考原图的旗子，是一种被风吹的效果， LOGO 也是不规则图形，左上方的旗子一角遮住了光线，形成了暗部。用钢笔勾勒出旗子、 LOGO 、阴影的形状。阴影部分，纯色填充改为渐变填充，拉一个深色的渐变，渐变为左上角深色右下角浅色，角度调整要合适。 LOGO 的变形要依据旗子的摆动起伏来画。
步骤 16
天线部分主要由直线(或矩形)、圆柱体(圆柱体画法见步骤 11)、半球体(半球体画法见步骤 12)、圆环(圆环画法见步骤 17)拼成。依照参考线，注意图形前后位置顺序。
步骤 17
画圆环时，先画一个正圆，去掉填充，描边加粗，选择【3D—凸出和斜角】，位置选择【等角—上方】，选择合适的凸出厚度，减少混合步骤。
步骤 18
文字部分画法。依照原图，输入文字后，选择合适的字体，【选择工具】选中字体，右键点击【创建轮廓】，调整到合适的长宽比。将文字图形编组，选择【效果—3D—旋转】，位置选择【等角—右方】，取消编组，释放剪贴蒙版，将图形提取出来。这里要值得注意的是，3D 效果做的旋转，放大画布可以看到不会完全与参考线吻合，可以在【变换】中适当调整角度。
步骤 19
【建筑—左】图标画法。参考原图，除去视觉角度，这是一个正方形和圆形组成的图案。其中，可以利用【描边—粗细】、【路径查找器—差集】、【路径查找器—分割】、【形状查找器】、【对称】、【对齐】等工具来做。在用路径查找器之后，取消编组，把不需要的图形删掉，桔色圆弧部分在做凹槽时，利用【钢笔】和原图形来做。平面做完之后全选编组，选择【3D—旋转】，设置选项，做出与画面同步的角度。
步骤 20
【基座】上有两个图形，我们可以同样理解为两个图标。注意彼此的大小比例。【基座】上的两个图标角度与【建筑—左】不同，要注意。
步骤 21
画【基座】上的楼梯是，先将楼梯分解为若干个长方体加一个三角形来画。长方体由单个的正方体，通过【直接选择工具】，选择对应的锚点，拖动到对应的角度，来完成。
步骤 22
在画【基座】的墙面装饰时，先将其理解成一个扁平的长方体，再在最大的一个面上做凹凸效果。若长方体面向自己时，凸起朝向也面向自己。所以长方体朝向在左下方时，凸起部分也朝向左下方。同时注意，从侧面看时，凸起部分是具有厚度的。在改变该结构的朝向时，也要注意凸起的5个面的角度。最后根据光线安排明暗关系。并加上小长方体。
步骤 23
信号发射器大体由【钢笔】依据参考线来画。涉及到圆形的部分可以用【3D】来画。注意各个体块的受光情况。
步骤 24
先将发射塔基座看成一个扁平的长方体，将该长方体看成一个底面和三个可见面。将三个可见面选中，右键【编组】。选择【直接选择工具】，点击其中一个可见面的锚点，在工具栏中调整边角数值，调整三个可见面的边角数值。之后调整底面的锚点边角数值。最后使底面和三个可见面【水平居中对齐】、【垂直底对齐】，选中他们，在【路径查找器】中选择【分割】，右键【取消编组】，更改亮暗的颜色。最后加上圆柱体和栏杆。
步骤 25
继续补充、调整细节。所有的结构都要根据参考线的角度和比例来画。把画好的结构都依照参考线拼好，再调整、增加或删减些细节。
步骤 26
进行配色，根据每个体块所占画面的不同比例来选取颜色，选好哪几个体块用哪一个颜色。配色网站中的配色不一定能直接拿来用。选择好需要的色相，再根据受光的情况调整亮暗面的颜色。
步骤 27
将不同的体块改为相应的颜色。
步骤 28
根据画中物体比例画一个建筑底座，为底座加上投影，并排版，画布比例选择 3:4 ，背景纯色填充改为渐变填充。将建筑原位复制一个并放大到合适的位置，调整透明度，右上角合适位置加上 LOGO 和英文。
免责声明：本教程来源于网络，禁止商业使用， 禁止个人使用，仅供学习交流使用 ，版权归原作者所有， 若涉及版权问题，请及时联系删除！！！(小编分享只为自己和大家学习所用！越努力，越幸运！本头条号不承担任何法律责任！)

OpenGL + OpenGL ES +Metal 系列文章汇总

该案例主要是对常见的图元连接方式的运用，常见的基本图元连接方式见此链接
最终实现的效果如图所示：


如图所示，整体的绘制流程如下



main函数：程序入口
ChangeSize函数：主要是设置视口及投影方式
SetupRC函数：图形数据配置，主要是顶点数据及图元连接方式
RenderScene函数：主要用于图形的绘制，可以系统触发，也可以开发者手动触发
SpecialKeys函数：对特殊键位的回调处理
KeyPressFunc：针对空格键的回调处理
DrawWireFrameBatch：用于立体图形的填充及边框绘制

主要对其中三个函数进行一些说明
ChangeSize函数
在之前的demo中，changeSize主要是用来设置视口大小以及当视口发生变化时调用的，而本案例中立体图形的绘制需要使用投影矩阵，因此需要在该函数中设置投影矩阵

主要涉及以下几个步骤

设置图形投影的方式：因为是立体图形，所以选择透视投影

//参数1：垂直方向上的视场角度
//参数2：视口纵横比 = w/h
//参数3：近裁剪面距离
//参数4：远裁剪面距离
viewFrustum.SetPerspective(35.0f, float(w)/float(h), 1.0f, 500.0f);


通过设置的投影方式获得投影矩阵，并将其存入投影矩阵中

projectionMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix());


初始化模型视图矩阵堆栈，压入一个单元矩阵

modelViewMatrix.LoadIdentity();

SetupRC函数
从流程图上可以看出，除了基本的背景色设置，存储着色器初始化以及顶点数据的创建及传输外，还需要对阵矩阵及观察者做一下设置

将模型视图矩阵和投影矩阵放到变换管道中，变换管道的作用是能帮助快速进行矩阵相乘，在RenderScene函数中可以直接通过变换管道的Get方法得到相应的矩阵

transformPipeline.SetMatrixStacks(modelViewMatrix, projectionMatrix);

其中，变换管道通过get可获得的矩阵有4种




方法
说明




GetProjectionMatrix()
投影矩阵


GetNormalMatrix()
法线矩阵


GetModelViewMatrix()
模型视图矩阵，简称mv


GetModelViewProjectionMatrix()
模型视图投影矩阵，简称mvp



设置观察者位置

cameraFrame.MoveForward(-15.0f);

观察者位置的设置有三种




方法
说明




void MoveForward(float fDelta)
向外移动的像素点，修改z


void MoveUp(float fDelta)
向上移动的像素点，修改y


void MoveRight(float fDelta)
向右移动的像素点，修改x


RenderScene函数
其流程如下所示，主要是立体图形的渲染过程


从流程图中可以看出，这个过程是将物体坐标转换为裁剪坐标，然后经过OpenGL的处理，转换为NDC，并显示到屏幕上的一个过程。在此过程中栈的变化如下所示



ChangeSize函数中向栈中初始化了一个单元矩阵
RenderScene函数中再次向栈中压入一个单元矩阵：主要是为了图形绘制完成后，矩阵的复原，所以此时栈中有两个单元矩阵

modelViewMatrix.PushMatrix();


将cameraFrame构建为 观察者矩阵，将栈顶单元矩阵取出，与观察者矩阵相乘，得到新的观察者矩阵，再将其入栈

    M3DMatrix44f mCamera;
    cameraFrame.GetCameraMatrix(mCamera);
    modelViewMatrix.MultMatrix(mCamera);


将objectFrame构建为 物体矩阵，取出栈顶的观察者矩阵，与物体矩阵相乘，得到模型视图矩阵，并将其入栈
然后利用固定管线渲染图形，在图像渲染完成后，将栈中模型视图矩阵pop，恢复其初始状态。

具体代码见Github OpenGL点/线…
最后，附一个圆形中顶点坐标（x，y）的求解图示