幽灵资源网 Design By www.bzswh.com

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

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

css实现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;
}

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

css实现3d立体魔方的示例代码
 

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

2、让div重合

div{							
    width: 300px;
    height: 300px;
    position: absolute;		/*在div的通用样式中加上绝对定位*/
}
body{						/*下面这一步是居中让所有的div在屏幕上居中*/
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

css实现3d立体魔方的示例代码
 

现在你们看到的是这个效果,明明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);
}

css实现3d立体魔方的示例代码
 

你们看到的应该还是这个样子,其实我们已经完成了魔方的拼接,只是魔方是平放着的我们看不出来,所以做一个动画旋转一下就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
 

css实现3d立体魔方的示例代码

五、总结

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

css实现3d立体魔方的示例代码 

总之一句话就是,你右转在向前进 和 你前进在右转你到达的位置是不一样的
就是这个原理。如果你明白了就算是入门了3d还有很多好玩的。等待你慢慢的摸索。

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

标签:
css,3d立体魔方

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com