从正四菱柱到正n菱柱

最近有时间又在复习c3变换的东西，虽说之前也浅浅的学过，但是这次实践起来发现还是有很多东西没有真正的理解，而有些东西被淡忘在闲置的时光里。虽然现在有很多东西不会，在大前端的知识海洋里，自己宛若一只蝼蚁，但也不反感现在的状态。每天早上小跑一回儿，也许没啥用，但也不勉强自己，只求个积少成多。学习进度按自己的节奏来，虽说速度是慢了些，但也无愧于心，只求今天比昨天好。每天学习一点点，重拾那些丢失的记忆。。。

一、认识变换

大概好些年前，我们看的电影还是2d形式的，现在3d电影已是遍布全国，给人身临其境的体验。在css的世界里，也有2d，3d的概念，2d顾名思义就是两个维度(x,y)，两个维度构成一个面，而在3d的世界里比2d多了一个维度(z)，给人展现立体的效果。小时候学习立体几何的时候最先接触的是正方体，长方体，菱柱这些。。。那如何在浏览器中构建这样的立体效果呢？那先来了解几个属性。

1、transform

transform 是c3中的变换属性，通过这个属性，我们可以对一个元素进行平移，旋转，放大缩小等操作。

取值:

• 变换函数 translate(), rotate(), scale(), skew(), matrix()…
• none

2、translate(x轴上平移的距离, y轴上平移的距离)

平移函数，用来定义元素从一个位置平移到另一个位置。针对不同的方向还衍生出来了其他一系列的平移函数，比如translateX(), translateY(), translateZ(),还有针对3d空间衍生出来的translate3d()

3、rotate(x轴上旋转的角度, y轴上旋转的角度)

旋转函数，用来定义元素旋转变换。和translate函数类似，也针对不同方向不同维度衍生出一系列函数，比如rotateX(),rotateY(),rotateZ(),rotate3d()

二、perspective 和 transform-style

实现一个长方体，无非是对元素的旋转平移，但实际上除了掌握旋转平移，还需要了解另外两个很重要的属性，即perspective和transform-style

1、perspective

用来定义观察者与被观察的物体的距离（即观察者到z轴的距离）。就像在现实世界里，离物体越远，看到的物体越小，离物体越近看到的物体越大。

2、transform-style

transform-style 用来定义变换的形式，是3d变换还是2d变换

取值：

• flat 默认值，2d变换
• preserve-3d 3d变换

三、尝试实现正四菱柱

具备上述的知识点，就来尝试下如何实现四菱柱。先来分析下，四菱柱除去上下底面，还有四个面，我们可以将四个面堆叠在一起，这样可以统一一个变换中心，然后针对每一个面做旋转平移处理。

1、准备基础素材：

html:
    <div class="wrap">
        <div class="box">
            <div class="front">1</div>
            <div class="right">2</div>
            <div class="back">3</div>
            <div class="left">4</div>
        </div>
    </div>

css:
    body {
        background: #ccc;
    }
    .wrap {
        perspective: 400px;
    }
    .box {
        width: 200px;
        height: 300px;
        margin: 200px auto;
        position: relative;
        transform-style: preserve-3d;
    }
    .box div {
        width: 100px;
        height: 150px;
        position: absolute;
        top: 50px;
        left: 50px;
        opacity: .8;
        color: #fff;
        transform-origin: center center;
    }
    .front {
        background: red;
    }
    .right {
        background: green;
    }
    .back {
        background: purple;
    }
    .left {
        background: orange;
    }

得到如下效果：

2、尝试变换

准备好素材，就要开始变换四菱柱的每个面了，通过平行变化，正四菱柱的正面其实直接进行平移就ok了，左侧面需要先旋转一个角度，然后再做平移，嗯。。。旋转，应该关于谁旋转呀，不用想，就知道是关于Y轴旋转，旋转多少度呢？当然是旋转90度，只有旋转90度才能与正面垂直呀,然后再向右(x轴)平移1/2元素的宽度？来试下？

html:
    <div class="wrap">
        <div class="box">
            <div class="front">1</div>
            <div class="right">2</div>
            <div class="back">3</div>
            <div class="left">4</div>
        </div>
    </div>

css:
    body {
        background: #ccc;
    }
    .wrap {
        perspective: 400px;
    }
    .box {
        width: 200px;
        height: 300px;
        margin: 200px auto;
        position: relative;
        transform-style: preserve-3d;
    }
    .box div {
        width: 100px;
        height: 150px;
        position: absolute;
        top: 50px;
        left: 50px;
        opacity: .8;
        color: #fff;
        transform-origin: center center;
    }
    .front {
        background: red;
        transform: translateZ(50px);
    }
    .right {
        background: green;
        transform: rotateY(90deg) translateX(50px)
    }
    .back {
        background: purple;
    }
    .left {
        background: orange;
    }

得到如下效果：

咦？为啥只看到了正面这一个面有变化，右侧也做了设置的呀，为啥看不出变化？不知道是否有宝宝也和我一样，把坐标轴想当然的以为是静止不变的，就像数学里面那样坐标轴是固定的，所有的面共用一个坐标轴。

实际上在web中，每个面都有独立的坐标轴，当面发生旋转的时候，坐标轴也会跟着旋转，所以在上述例子中我们把右侧的面旋转了90度之后，右侧面的坐标轴也跟着旋转了90度，以为右侧面的x轴还是向右，实际上旋转之后x轴已经变成向后了，而z轴向右（z轴始终垂直元素所在的平面），所以我们想要得到期待的效果，是需要translateZ(50px),而不是translateX(50px)。

另外可能还有个关于旋转的角度的点有些不好理解，日常生活中，我们常常顺时针旋转的度数为正，逆时针旋转的度数为负，而在web中，我们遵守左手法则，左手的大拇指指向坐标轴的方向，四指所指的方向就是正方向，所以此处按常规思维以为右侧面是应该沿y轴旋转（逆时针旋转90deg）的，实际上根据左手法则，y轴的逆时针方向才是正方向，所以此处是rotateY(90deg), 而不是rotateY(-90deg)。

3、正确变换

了解了上述的知识点之后，正四菱柱就变的易如反掌了，那就把剩余的代码补上呗。

html:
    <div class="wrap">
        <div class="box">
            <div class="front">1</div>
            <div class="right">2</div>
            <div class="back">3</div>
            <div class="left">4</div>
        </div>
    </div>

css:
    body {
        background: #ccc;
    }
    .wrap {
        perspective: 400px;
    }
    .box {
        width: 200px;
        height: 300px;
        margin: 200px auto;
        position: relative;
        transform-style: preserve-3d;
    }
    .box div {
        width: 100px;
        height: 150px;
        position: absolute;
        top: 50px;
        left: 50px;
        opacity: .8;
        color: #fff;
        transform-origin: center center;
    }
    .front {
        background: red;
        transform: translateZ(50px);
    }
    .right {
        background: green;
        transform: rotateY(90deg) translateZ(50px)
    }
   .back {
        background: purple;
        transform: rotateY(180deg) translateZ(50px)
    }
    .left {
        background: orange;
        transform: rotateY(270deg) translateZ(50px)
    }

当然也可以添加点旋转动效呀，直接上codepen呀~

四、了解正菱柱的特点

概念：

底面是正多边形的直棱柱叫做正棱柱。正棱柱是侧棱都垂直于底面，且底面是正多边形的棱柱

了解正多边形的特点：

1、直接引用张大神博客上的图片

2、看到这张图片是否瞬间觉得豁然开朗，有了它再加上上面的前面的知识点，我们可以创造正n菱柱，来，说干就干，为加深印象，徒手就从四菱柱写到了正7菱柱（写了个彩虹色嘛，七色斑斓），一起看看：

• 五菱柱：
  直接上codepen呀~

• 六菱柱：
  直接上codepen呀~

• 七菱柱
  直接上codepen呀~

用js简单封装一个生成正n菱柱的插件

感觉每次手动去写去计算还是不够爽，所以就动手自己封装一个可以生成正n菱柱的插件

直接上codepen呀~

其实也没有什么特别的说，主要还是加深理解。