用CSS实现3D魔方动画旋转

一、3D魔方的实现

这里呢主要是用我们的div标签来对魔方的各个面及各个块进行实现，先上一个主体的html代码吧

<div id="box">
            <!-- 各个面 -->
            <div class="one">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="two">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="three">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="four">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="five">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="six">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

我们可以看到有一个id=box的div，这就是我们一整个魔方的的样子的啦，那么我们就现在里面设置一下CSS样式吧

#box {
    position: relative;
    font-size: 90px;
    width: 180px;height:180px;
    margin: 120px auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

在这里我们设置了box的一些基本属性，其中最重要的两句话就是

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

这两句话是使整个box具有3D视角的基础 （两句话分别对webkit内核浏览器和W3C标准的浏览器进行了兼容）
做了一个大的设置后，我们开始对魔方的每个面进行设置，首先我们把他们共有的一些属性都抽出来

#box div {
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(0, 0, 0, .1);
}

敲黑板！！这里最好把position设置为absolute，不然对之后的一些改变会很麻烦

这个时候我们看到的东西应该就是漆黑一片的一个正方体，因为这个时候是6个面叠在一起

那么接下来就开始让每个面进行一个3D变化，但在这之前，我们需要先了解一个CSS3新增的属性transform，在这里就简单讲几个跟我们3D魔方相关的几个东西，详情 CSS手册transform属性

transform：translateX(90px);

这句话的意思是往x轴的正方向（即电脑屏幕向右）平移90px，同理，将X换做Y（正方向为电脑屏幕向上）或Z（正方向为电脑屏幕指向自己的方向）也会有相应的效果。

transform: rotateX(-90deg)

这里是指沿着x轴旋转-90度，如果没有特别指定 transform-origin（设置或检索对象以某个原点进行转换），则默认为以中心点进行旋转，同理，将X换做Y或Z也会有相应的效果
大概了解了这些，我们便可以开始让我们6个面进行立体变化了，首先我们先想好一个东西，就是这个魔方的中心点，在这里我们将魔方的中心设置在我们现在看到的正方形的中心（默认的transform-origin），那么第一个面

.one {
    -webkit-transform: translateZ(90px);
    transform: translateZ(90px);
}

我们先让它往z轴移动90px，那么久会离我们视线变近

第二个面就开始不一样了

.two {
    -webkit-transform: rotateX(90deg) translateZ(90px);
    transform: rotateX(90deg) translateZ(90px);
}

我们来解析一下这一小段代码，首先这个面是往Z轴方向移动了90px和第一个面重合，然后绕着x轴旋转，就像体操运动员一样向上翻转，翻转根据的x轴就是默认的transform-origin

浅蓝色的面为第一个面，深蓝色的面为第二个面，以红色的点为中心点进行旋转变化，同样的，其他几个面也可以先进行Z轴移动，再进行旋转得到（代码不详细写出，效果图如下）

6个面完成后，就要开始对每个面里面的小方块进行设置了

#box .one div {
    width: 60px;
    height: 60px;
    float: left;
    position: relative;
    display: inline-block;
    border: none;
    background: rgba(255, 0, 0, 0.8);
    border-radius: 20%;
}

这里将一整个面的所有方块都进行了设置，最主要是前面的5句，因为父元素设置了position:absolute，因此需要将其转化为relative，将每个小块都转化成行内块级元素，并进行浮动，使它们能够对齐排列，而剩下的代码就是对每个面的方块的个性化设置，大家可以自己设置颜色边距等（注意width和height大小，如果加了border就要将div的width和height调小，以免超出范围）

最终的效果如下

有人可能会问，为什么笔者的可以看到3D效果，但自己的却不行，那你可以试一下在#box中加入这句

-webkit-transform: rotateX(30deg) rotateY(44deg);

然后用浏览器的调试模式，改一下数值就好，这里就是将整个魔方进行翻转的属性。

二、动态效果的实现

如果要实现动态效果，那么#box中的一些东西，就要增加了，接下来给大家看看#box里面的完整代码

#box {
    position: relative;
    font-size: 90px;
    width: 180px;
    height: 180px;
    margin: 120px auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: animations 5s 0s infinite ease-in-out normal none;
    animation: animations 5s 0s infinite ease-in-out normal none;
}

首先一定要设置宽高，这样transform-origin才可以在center的位置，如果不设置的话，也可以，把transform-origin改为如下，但位置效果会有些奇怪，需要另外调整

-webkit-transform-origin: 90px 90px 0;
    transform-origin: 90px 90px 0;

动画最关键的一个就是animation，具体相关的东西参考 CSS参考手册animation
我们需要另外再设置一个东西就是，要做什么动画

@-webkit-keyframes animations {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        -webkit-transform: rotateX(-24deg) rotateY(40deg);
    }
    50% {
        -webkit-transform: rotateX(-142deg) rotateY(112deg);
    }
    75% {
        -webkit-transform: rotateX(-226deg) rotateY(200deg);
    }
    100% {
        -webkit-transform: rotateX(-360deg) rotateY(360deg);
    }
}
keyframes animations {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: rotateX(-24deg) rotateY(40deg);
    }
    50% {
        transform: rotateX(-142deg) rotateY(112deg);
    }
    75% {
        transform: rotateX(-226deg) rotateY(200deg);
    }
    100% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
}

这样和#box结合起来，就是魔方在2s内围绕着中心点进行旋转，从而我们可以看到不同的面，当然，里面的数值，大家可以进行更改，从而实现不一样的动画效果