CSS怎样做一个3D魔方？

发布时间：2024-04-27 23:38:24 所属栏目：编程来源：DaWei

导读： 用CSS怎样做一个3D魔方？有一些朋友看到一些网站上有做3D相册的效果，感觉很炫酷、很好看。其实实现3D相册效果并不难，这里我们通过一个简单的3D魔方实现示例给大家来讲讲，用CSS怎样做出3D

用CSS怎样做一个3D魔方？有一些朋友看到一些网站上有做3D相册的效果，感觉很炫酷、很好看。其实实现3D相册效果并不难，这里我们通过一个简单的3D魔方实现示例给大家来讲讲，用CSS怎样做出3D效果，看懂这篇大家就能够自己尝试做3D相册了。本文的3D魔方实现效果及代码如下：

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>3d立体魔方</title>
<meta 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样式

*{
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加上一点文字更容易观察

四、动画旋转

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>3d立体魔方</title>
<meta charset="UTF-8">
<style type="text/css">
*{
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);

}
}
</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。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!