CSS3D魔法——旋转魔方

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、制作原理

1、2D的动画属性

具体的动画属性参见博主的另一篇文章 ，2D动画属性点这里，你要的全拿走！！！

2、3D的动画属性

基本属性：

• 3D位移：translate3d(x,y,z)
• 3D旋转：rotate3d(x,y,z,deg)
• 透视：perspective
• 3D呈现：transfrom-style

三维坐标系：

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
X轴：水平向右（注意：X往右边是正值，往左边是负值）
Y轴：垂直向下（注意：Y往下面是正值，往上面是负值）
Z轴：垂直屏幕（注意：往外面是正值，往里面是负值）

我们看到的电脑屏幕的左上角等同于坐标中心原点，屏幕上边沿是x的正轴，屏幕左边沿是y的正轴。

二、魔方图片

大家一起用自己喜欢的idol图片做一个酷炫的魔方吧！！！
先来看看静止状态下的效果图，别急，更好看的在下面！！！

效果图（示例）：

三、代码

css代码如下（示例）：

body {
			/* 透视写在被观察元素的父盒子上面的 */
            perspective: 3000px;
        }
        
        section {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 500px auto;
            /* 代码写给父级，子元素开启立体空间 */
            transform-style: preserve-3d;
            transition: all 2s;
            animation: rotate 10s linear forwards;
        }
        /* 给每个div设置大小、背景图片和位置 */
        section div:nth-child(1) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/1.jpg);
            transform: translateZ(300px);
        }
        
        section div:nth-child(2) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/2.jpg);
            transform: translateX(300px) rotateY(90deg);
        }
        
        section div:nth-child(3) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/3.jpg);
            transform: translateZ(-300px) rotateY(180deg);
        }
        
        section div:nth-child(4) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/4.jpg);
            transform: translateX(-300px) rotateY(270deg);
        }
        
        section div:nth-child(5) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/5.jpg);
            transform: translateY(-300px) rotateX(90deg);
        }
        
        section div:nth-child(6) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/6.jpg);
            transform: translateY(300px) rotateX(-90deg);
        }
         /* 制作旋转动画 */
        @keyframes rotate {
            0% {}
            25% {
                transform: rotateX(270deg);
            }
            50% {
                transform: rotate3d(-1, -1, 0, 270deg);
            }
            75% {
                transform: rotate3d(1, -1, 0, 180deg);
            }
            100% {
                transform: rotateY(270deg);
            }
        }
        /* 规定鼠标指向魔方的时候规定动画是否正在运行或暂停 默认是running，暂停是paused */
        section:hover {
            animation-play-state: paused;
        }

HTML结构代码如下（示例）：

  <section>
  		 <!-- 六个盒子分别装6张背景图片 -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

四、动态魔方效果

效果如下（示例）：

---