css3之3D魔方动画（小白版）

php中文网

发布时间：2016-09-28 08:38:24

1828人浏览过

来源于php中文网

原创

.box{
    animation: cube_animation ease-in-out 6s infinite forwards;  
    transform-style: preserve-3d;
    transform-origin: 90px 90px 90px;
}
.bside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatex(-90px) translatez(90px) rotatey(90deg);
}
.cside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(90px) rotatex(90deg);
}
.eside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(-90px) rotatex(90deg);
}

在这里分享一下3D魔方动画，html5+CSS3即可完成~无图无真相，先上效果图

第一步非常简单，就是先将魔方的结构画出来。大家都玩过魔方，知道魔方是一个有六个面的正方体。这里我们先写一个大的div(类名为box)作为容器，里面包含魔方6个面，即6个div，然后我这里每个面里还分了9个小div就是9个小格子。代码如下，简单看看

...

第二步，有了魔方的结构，我们开始给魔方上色。我们直接看代码，简单粗暴~

立即学习“前端免费学习笔记（深入）”；

.aside{
    width: 180px;　　　　　　
    height: 180px;　　　　　　/* 这里定义每个面长宽都是180px */
    position: absolute;　　  /* 设置绝对定位，方便后面控制每个面的位置*/
    transform: translatez(0px);　　/*对这个面进行位置的移动*/
}
.aside div{
    width: 54px;　　　
    height: 54px;　　　　
    border-radius: 4px;　　/*设置圆角才能看到格子与格子间的小孔*/
    float: left;　　
    border: 3px solid #000;　　/* 这里定义每个格子的边框是3px 所以一个格子总的长宽是54+3+3=60px 一行3个格子60*3=180px 一列同理 */
    background: green;　　/*上色*/
}

第三步，我们画了这么久魔方，你把文件放到浏览器一看，结果发现连个魔方的影都没有？不急。我们首先需要在父容器上添加 transform-style: preserve-3d; 这句代码很关键，让该元素的子元素看起来变成3D效果，默认是平面效果（2D），(具体请看https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)

好，添加了这句代码以后，我们要开始移动6个面，使之组合后看起来是个正方体。移动6个面无非就是以下几句代码

/*向X轴正方向平移80px长度、向Y轴负方向平移80PX、向Z轴正方向平移90px*/
transform: translatex(80px)  translatey(-80px) translatez(90px);
/*向X轴顺时针转动30度（℃）、向Y轴顺时针转动45度、向Z轴逆时针转动90度*/
transform:rotatex(30deg) rotatey(45deg) rotatez(-90deg);

什么？你说浏览器不兼容？自己加相应前缀即可，这里不详细讨论。栗子（-webkit-transform:rotatex(30deg);）

自己打开浏览器F12慢慢调试自己想要的角度。这里贴上我自己的代码仅供参考~

.box{
    animation: cube_animation ease-in-out 6s infinite forwards;  /*魔方动画设置*/
    transform-style: preserve-3d;　　/*3d渲染*/
    transform-origin: 90px 90px 90px;
}
/*魔方动画效果*/
@keyframes cube_animation{
    from,to{}
    16%{
        transform: rotatey(-90deg);
    }
    33%{
        transform: rotatey(-90deg) rotatez(135deg);
    }
    50%{
        transform: rotatey(225deg) rotatez(135deg);
    }
    66%{
        transform: rotatey(135deg) rotatex(135deg);
    }
    83%{
        transform: rotatex(135deg);
    }
}
/*魔方六面*/
.aside{
    width: 180px;
    height: 180px;
    position: absolute;

}

.bside{
    width: 180px;
    height: 180px;
    position: absolute;
　　/*魔方的B面，先向左平移90px,再靠近人脸90px,最后y轴顺时针90度*/
    transform: translatex(-90px) translatez(90px) rotatey(90deg);
}

.cside{
    width: 180px;
    height: 180px;
    position: absolute;

    transform: translatez(90px) translatey(90px) rotatex(90deg);
}

.dside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(180px);
}

.eside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(-90px) rotatex(90deg);
}