css如何实现3d立体魔方

2023-06-08 05:06:45 445人浏览独家记忆

摘要

小编给大家分享一下CSS如何实现3D立体魔方，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！先看效果图吧！把这个看会了，一些网上的3d的相册你就都会了一、我们先准备

小编给大家分享一下CSS如何实现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{     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;}body{    height: 100vh;    width: 100vw;    display: flex;    justify-content: center;    align-items: center;}

css如何实现3d立体魔方

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

三、开启3d空间

body{    transfORM-style: preserve-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{    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立体魔方