用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内围绕着中心点进行旋转，从而我们可以看到不同的面，当然，里面的数值，大家可以进行更改，从而实现不一样的动画效果