今天来做一个 简单 的3d魔方
先看效果图吧！把这个看会了，一些网上的3d的相册你就都会了
一、我们先准备好们的ht ML 代码
<!DOCTY PE html>
<html lang="zh-CN">
<head>
<t IT le>3d立体魔方</title>
< ;m eta charset="UTF-8">
</head>
<body>
<div class="top"></div> <!--上 -->
<div class="bottom"></div> <!--下 -->
<div class="left"></div> <!--左 -->
<div class="right"></div> <!--右 -->
<div class="after"></div> <!--后 -->
<div class="before"></div> <!--前 -->
</body>
</html>
好了我们html代码就准备完成了,首先我们要有一个3d的 思维 ,在大脑中现象一下魔方 是什么 样子的,不就是用六个面组成的吗。
二、添加css样式
*{
m arg in:0; /* 默认样式去掉 边距 */
padding:0;
}
div{ /* div通用样式 设置高 宽 */
width: 300px;
h ei ght: 300px;
opacity:0.5; /*透明度 半 透明*/
}
.top{ /* 通过类名设置颜色下面都是设置颜色*/
background-color: br own;
}
.bottom{
background-color:blueviolet;
}
.left{
background-color:blanchedalmond;
}
.right{
background-color: CAD etblue;
}
.after{
background-color:chocolate;
}
.before{
background-color:cyan;
}
好了到了这一步就相当与把地基打好了，我们 开始 盖楼了
&nbs p;
你看到的必须是这个效果 注意我这里是缩小了 ，你 应该 也是和我一样方块都是挨着的，像柱子一样堆着的。这下我们就要开始像纸片一样把他们拼凑起来了。
2、让div重合
div{
width: 300px;
height: 300px;
position: absolute; /*在div的通用样式中加上绝对定位*/
}
body{ /*下面这一步是居中让所有的div在屏幕上居中*/
height: 100vh;
width: 100vw;
dis play : flex;
justify-content: center ;
align -i tems: center;
}
现在 你们 看到的是这个效果，明明6个方块怎么只有一个，其实并不是，只是其他的div在这个div的后面，前面这个div挡住我们的视线了所以看不见。
三、开启3d空间
body{
transform -s tyle: PR eserve-3d; /*只需要这一条代码开启3d空间*/
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
在把div拼凑起来
.top{
background-color:brown;
transform:rotateX(90 deg ) 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加上 一点 文字更容易观察
四、动画旋转
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>3d立体魔方</title>
<meta charset="UTF-8">
<style type="text/css">
*{
mar gin :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: fr am 1 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);
}
}
</style>
</head>
<body> <!--加入文字让视觉更加清晰-->
<div class="top">1</div>
<div class="bottom">2</div>
<div class="left">3</div>
<div class="right">4</div>
<div class="after">5</div>
<div class="before">6</div>
</body>
</html>
好了全部代码都在这了，我已经带着你做完了，如果你想做一个3d相册的话,直接给div加上背景图就好 background-color替换为background-image
五、总结
让我们讲讲 细节 吧!当让这也是最终要的，希望你看到。拼接的过程你们只看到了代码，首先我们 制作 了六个 width:300px与height:300px 的div，我们通过 position:absolute 让他们叠加在了一起，你只需要记住绝对定位会让层级重叠就好了 z-inde: 可以控制他的层级，好了到最 重要 的地方了， transform:rotateX(90deg) translateZ(150px); 这里为什么我是先旋转在偏移呢?
总之一句话就是，你右转在向前进 和 你前进在右转你到达的位置是不一样的
就是这个原理。如果你明白了就算是入门了3d还有很多好玩的。等待你慢慢的摸索。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 css实现3d立体魔方的示例代码 全部内容，希望文章能够帮你解决 css实现3d立体魔方的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css实现3d立体魔方的示例代码的详细内容...