CSS3六面体旋转以及纸牌翻转思路心得

最近在练习CSS3动画。做了两个小 demo，一个是六面体的旋转，一个是翻纸牌的小 demo。特此再次总结一下自己的思路，以及踩过的坑。O(∩_∩)O

六面体旋转的思路

首先我们来说一下关于六面体的旋转，可以化解两个步骤：
1.构建六面体
2.旋转六面体
其实第二个步骤很好做，旋转只需要用 transform rotateX rotateY rotateZ 就可以了。所以关键是在我们如何构建一个六面体。

一、构建六面体

首先我们建立六个面，并将它包裹在一个 div 里面

    
前
    
后
    
右
    
左
    
上
    
下

但是这个样子，会造成六个 div 是并排排下来的，所以我们设置这些 div 的定位为绝对定位，这样，六个面就重合了，中心在在同一个点：

.wrap > div{
            display:block;
            position:absolute; 
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;
            font-size:60px;
            color:white;
}

根据上面 3D 的 XYZ 轴，想象一下，六面体前面和后面两个是正对着我们的，所以他不需要进行任何旋转的工作。但是，左边那个面应该是向上旋转90度的，也就是向 Y 轴旋转，而右边那个面则是向Y轴旋转-90度啦，这样他两个面就相对了。接下来就是旋转上下两个面，朝着 X 轴旋转90度和-90度。设置好六个面之后，接下来就是设置每个面的透视的位置啦。因为我设置的六面体的长和宽是100px，我以六面体的中心为轴，所以前面这个面我设置的 translateZ 为50px，那么后面那个面自然九尾-50px了。剩下的四个面应该都是50px，因为他们都连着‘’前面‘’。最后形成代码如下：

.front{
    border:none;background:rgba(0,0,0,0.3); 
    -webkit-transform:translateZ(50px);
    transform:translateZ(50px);
}
.back{
    background:rgba(0,255,0,1); 
    -webkit-transform:translateZ(-50px);
    transform:translateZ(-50px);
}
.right{
    background:rgba(196,0,0,0.7);
    -webkit-transform:rotateY(90deg) translateZ(50px); 
    transform:rotateY(90deg) translateZ(50px);
}
.left{
    background:rgba(0,0,196,0.7);
    -webkit-transform:rotateY(-90deg) translateZ(50px);
    transform:rotateY(-90deg) translateZ(50px);
}
.top{
    background:rgba(196,196,0,0.7);
    -webkit-transform:rotateX(90deg) translateZ(50px);
    transform:rotateX(90deg) translateZ(50px);
}
.bottom{
    background:rgba(196,0,196,0.7); 
    -webkit-transform:rotateX(-90deg) translateZ(50px);
    transform:rotateX(-90deg) translateZ(50px);
}```
接下来咱们设置重点：`perspective`。
因为咱们将六个面都包在一个 *wrap* 里面，所以咱们实际上是看wrap这个div。*所以我们需要对  *wrap* 设置`transform-style:preserve-3d;`（这个代表你看大的是2d还是3d）*。根据 [我查阅的资料](http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ )
正方体透视中心应该为`perspective-origin: 25% 75%;`

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5404409-8bc22b52c366983b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

重点来了：设置`perspective`.起初，我设置了，`perspective`的值为250px，这样，也没多大问题，但是可以很明显的看出，后面比前面从眼睛看上去比较小，导致在旋转的时候，六个面在旋转的时候都变形了，呗拖了很长。这个时候，是透视距离太小了，导致后面的面与前面的面差太多，于是旋转的时候就变形。当我把透视（perspective）设的距离大一点的时候，当我设的距离为660px的时候，前后两个面基本一样大小，旋转的时候也不会变形。其实，还有一种方法，就是不设perspective视点。这样也不会产生变形。因为这整个正方体围绕中心旋转，不管哪个面转到了前面，都是相对一开始的位置并没有变化。反之，如果按照某个特定端点来转动，正方体的位置会发生变化，这样就导致了每个面就有视差。但是这样的话，旋转到最后的时候，前面和后面两个面是重合了O(∩_∩)O
######二、旋转六面体
旋转就比较简单了，就是让沃恩的 *wrap* 区域转动。动画如下：

@keyframes run{
0%{
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform-origin: center center;
}
100%{
transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
transform-origin: center center;
}
}

随后将这个动画绑定到wrap上就行啦。

这样旋转六面体就讲完啦。接下来我们说一下翻转纸牌效果：~~
####纸牌翻转的思路
整体的思路可以分为如下几个步骤：
1.设计布局方式和排版
2.编写两张纸牌摆放位置
3.编写纸牌翻转效果
#####一、设计布局方式和排版
这次布局采用flex布局，这个的排版的形式是第一行摆放三张牌，第二行摆放两张牌
#####二、编写两张纸牌摆放位置
两张牌应该也是中心重合的，所以需要对着两张牌设置 *position* 的位置为 *absolute*，并且，为了效果一致，这两张牌的宽度和长度最好保持一致。
并且设置第一章牌的 *z-index* 为2，第二章牌的 *z-index* 为1，这样我们就能看见静态摆放着的是第一张牌，实际上第二章牌放在他下面。O(∩_∩)O
#####三、编写纸牌翻转效果
假设希望牌是沿着Y轴旋转的，也就是沃恩口中常说的，竖着转~，所以，我们默认第一张牌他不转动任何角度，即 *rotateY（0）*,让第二章牌反着放,也就是 *rotateY（180deg）*，这样，当我鼠标点击或移动到第一张牌的，让第二排的角度变为0度，这样，从反面沿着 *Y* 轴转到正面，就是我们想要的效果啦。代码如下：

 /*正面*/
.poke_one{
    background:url(../image/poke.jpg) no-repeat;
    background-size:100% 100%;width: 15rem;
    height:20rem;
    position: absolute;
    z-index:2;
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
}
/*反面*/
.poke_two{
    width: 15rem;
    height:20rem;
    background: #99cc33;
    position: absolute;
    z-index:1;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    color:#fff;
    font-weight: bold;
    line-height: 20rem;
    text-align: center;
    font-size: 3.2rem;
}
/*准备翻牌*/
.wrap>div{
    perspective:200px;
    -webkit-perspective:200px;
    -moz-perspective:200px;
    -ms-perspective:200px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transition:0.8s ease-in-out ;
    -moz-transition:0.8s ease-in-out ;
    -ms-transition:0.8s ease-in-out ;
}
.wrap:hover>.poke_one{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.wrap:hover>.poke_two{
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
}

大家有的可能会很好奇`-webkit-backface-visibility: hidden;`是神马东东，我来解释一下，因为咱们是 *3d* 的，所以其实前后两个面咱们是能看见的，相当于咱们拥有了透视眼，而`-webkit-backface-visibility: hidden;`则是让我们的眼镜只能看见正最着我的图片，而排在这图片后面的，与他面积相等，或者比他面积小的，统统都不可见了。所以，当第二章扑克牌翻过来的时候，咱们是瞅不见第一张扑克牌的。

####结束
好了，以上就是我的关于六面体旋转和纸牌翻转的思路，有木有觉得顿时明白了呢。。。嘿嘿。在这里，十分感谢小虫巨蟹对我的帮助和指导。也请大家多多关注菲麦前端~~~~~
另附上我的demo展示：[CSS3六面体旋转](https://swallow-liu.github.io/Task/taskThree.html)     [纸牌翻转效果](https://swallow-liu.github.io/Task/taskTransform.html)