今天来做一个简单的3d魔方

先看效果图吧！把这个看会了，一些网上的3d的相册你就都会了

一、我们先准备好们的html代码

3d立体魔方

好了我们html代码就准备完成了,首先我们要有一个3d的思维,在大脑中现象一下魔方是什么样子的,不就是用六个面组成的吗。

二、添加css样式

*{

margin:0; /* 默认样式去掉边距 */

padding:0;

}

div{ /* div通用样式 设置高宽*/

width: 300px;

height: 300px;

opacity:0.5;/*透明度 半透明*/

}

.top{ /* 通过类名设置颜色下面都是设置颜色*/

background-color:brown;

}

.bottom{

background-color:blueviolet;

}

.left{

background-color:blanchedalmond;

}

.right{

background-color:cadetblue;

}

.after{

background-color:chocolate;

}

.before{

background-color:cyan;

}

好了到了这一步就相当与把地基打好了，我们开始盖楼了

你看到的必须是这个效果注意我这里是缩小了，你应该也是和我一样方块都是挨着的，像柱子一样堆着的。这下我们就要开始像纸片一样把他们拼凑起来了。

2、让div重合

div{

width: 300px;

height: 300px;

position: absolute;/*在div的通用样式中加上绝对定位*/

}

body{/*下面这一步是居中让所有的div在屏幕上居中*/

height: 100vh;

width: 100vw;

display: flex;

justify-content: center;

align-items: center;

}

现在你们看到的是这个效果，明明6个方块怎么只有一个，其实并不是，只是其他的div在这个div的后面，前面这个div挡住我们的视线了所以看不见。

三、开启3d空间

body{

transform-style: preserve-3d; /*只需要这一条代码开启3d空间*/

height: 100vh;

width: 100vw;

display: flex;

justify-content: center;

align-items: center;

}

在把div拼凑起来

.top{

background-color:brown;

transform:rotateX(90deg) translateZ(150px); /*先旋转在偏移*/

}

.bottom{

background-color:blueviolet;

transform:rotateX(-90deg) translateZ(150px);

}

.left{

background-color:blanchedalmond;

transform:rotateY(-90deg) translateZ(150px);

}

.right{

background-color:cadetblue;

transform:rotateY(90deg) translateZ(150px);

}

.after{

background-color:chocolate;

transform:rotateY(180deg) translateZ(150px);

}

.before{

background-color:cyan;

transform:rotateY(0deg) translateZ(150px);

}

你们看到的应该还是这个样子，其实我们已经完成了魔方的拼接，只是魔方是平放着的我们看不出来，所以做一个动画旋转一下就ok了。你给div加上一点文字更容易观察

四、动画旋转

3d立体魔方

*{

margin:0;

/* 默认样式去掉边距 */

padding:0;

}

div{

width: 300px;

height: 300px;

position: absolute;

opacity: 0.5;

text-align: center;

line-height: 300px;

}

body{

transform-style: preserve-3d;

height: 100vh;

animation: fram1 10s ease; /*引用动画*/

width: 100vw;

display: flex;

justify-content: center;

align-items: center;

}

.top{

background-color:brown;

transform:rotateX(90deg) translateZ(150px);

}

.bottom{

background-color:blueviolet;

transform:rotateX(-90deg) translateZ(150px);

}

.left{

background-color:blanchedalmond;

transform:rotateY(-90deg) translateZ(150px);

}

.right{

background-color:cadetblue;

transform:rotateY(90deg) translateZ(150px);

}

.after{

background-color:chocolate;

transform:rotateY(180deg) translateZ(150px);

}

.before{

background-color:cyan;

transform:rotateY(0deg) translateZ(150px);

}

@keyframes fram1{/*动画旋转X轴与Y轴*/

0%,100%{

transform: rotateY(0deg) rotateX(0deg);

}

50%{

transform: rotateY(180deg) rotateX(180deg);

}

}

好了全部代码都在这了，我已经带着你做完了，如果你想做一个3d相册的话,直接给div加上背景图就好background-color替换为background-image

五、总结

让我们讲讲细节吧!当让这也是最终要的，希望你看到。拼接的过程你们只看到了代码，首先我们制作了六个width:300px与height:300px的div，我们通过position:absolute让他们叠加在了一起，你只需要记住绝对定位会让层级重叠就好了z-inde:可以控制他的层级，好了到最重要的地方了，transform:rotateX(90deg) translateZ(150px);这里为什么我是先旋转在偏移呢?

总之一句话就是，你右转在向前进 和 你前进在右转你到达的位置是不一样的

就是这个原理。如果你明白了就算是入门了3d还有很多好玩的。等待你慢慢的摸索。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。