css如何实现3 d立体魔方

　　介绍

小编给大家分享一下css如何实现3 d立体魔方,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

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

css如何实现3 d立体魔方

<强>一,我们先准备好们的html代码

& lt; ! DOCTYPE  html> 　　& lt; html  lang=皕h-CN"祝辞 　　,,,& lt; head> 　　,,,,,,,& lt; title>三维立体魔方& lt;/title> 　　,,,,,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt;/head> 　　,,,& lt; body> 　　,,,,& lt; div 类=皌op"祝辞& lt;/div>,& lt; !——上,——比; 　　,,,,& lt; div 类=癰ottom"祝辞& lt;/div>& lt; !——下,——比; 　　,,,,& lt; div 类=發eft"祝辞& lt;/div>& lt; !——左,——比; 　　,,,,& lt; div 类=皉ight"祝辞& lt;/div>& lt; !——右,——比; 　　,,,,& lt; div 类=癮fter"祝辞& lt;/div>& lt; !——后,——比; 　　,,,,& lt; div 类=癰efore"祝辞& lt;/div>& lt; !——前,——比; 　　,,,& lt;/body> 　　& lt;/html>

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

<强>二、添加css样式

* { 　　,,,保证金:0;,,,,/*,默认样式去掉边距,*/,,,填充:0; 　　} 　　div{/*大敌;div通用样式,设置高宽*/,,,宽度:,300 px; 　　,,,身高:,300 px; 　　,,,不透明度:0.5;/*透明度,半透明*/} 　　.top{/*大敌;通过类名设置颜色下面都是设置颜色*/,,,背景颜色:棕色; 　　} 　　.bottom { 　　,,,背景颜色:blueviolet; 　　} 　　.left { 　　,,,背景颜色:blanchedalmond; 　　} 　　铃声{ 　　,,,背景颜色:cadetblue; 　　} 　　那加{ 　　,,,背景颜色:巧克力; 　　} 　　.before { 　　,,,背景颜色:青色; 　　}

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

css如何实现3 d立体魔方“> <br/>, </p> <p>你看到的必须是这个效果<代码>注意我这里是缩小了> </代码,你应该也是和我一样方块都是挨着的,像柱子一样堆着的。这下我们就要开始像纸片一样把他们拼凑起来了。</p> <p> <强> 2,让div重合</强> </p> <pre类= div { 　　,,,宽度:,300 px; 　　,,,身高:,300 px; 　　,,,位置:,绝对;/*在div的通用样式中加上绝对定位*/} 　　{/*下身体面这一步是居中让所有的div在屏幕上居中*/,,,身高:,100 vh; 　　,,,宽度:,100大众; 　　,,,显示:,flex; 　　,,,justify-content:,中心; 　　,,,对齐项目:,中心; 　　}

css如何实现3 d立体魔方“> <br/>, </p> <p>现在你们看到的是这个效果,明明6个方块怎么只有一个,其实并不是,只是其他的div在这个div的后面,前面这个div挡住我们的视线了所以看不见。</p> <p> <强>三,开启3 d空间</强> </p> <pre类=身体{ 　　,,,传输格式:,preserve-3d;,,,/*只需要这一条代码开启3 d空间*/,,,身高:,100 vh; 　　,,,宽度:,100大众; 　　,,,显示:,flex; 　　,,,justify-content:,中心; 　　,,,对齐项目:,中心; 　　}

在把div拼凑起来

.top { 　　,,,背景颜色:棕色; 　　,,,变换:rotateX(90度),translateZ (150 px);,,,/*先旋转在偏移*/} 　　.bottom { 　　,,,背景颜色:blueviolet; 　　,,,变换:rotateX(-90度),translateZ (150 px); 　　} 　　.left { 　　,,,背景颜色:blanchedalmond; 　　,,,变换:rotateY(-90度),translateZ (150 px); 　　} 　　铃声{ 　　,,,背景颜色:cadetblue; 　　,,,变换:rotateY(90度),translateZ (150 px); 　　} 　　那加{ 　　,,,背景颜色:巧克力; 　　,,,变换:rotateY(180度),translateZ (150 px); 　　} 　　.before { 　　,,,背景颜色:青色; 　　,,,变换:rotateY(0度),translateZ (150 px); 　　}

css如何实现3 d立体魔方“> <br/>, </p> <p>你们看到的应该还是这个样子,其实我们已经完成了魔方的拼接,只是魔方是平放着的我们看不出来,所以做一个动画旋转一下就好了。<代码>你给div加上一点文字更容易观察</代码> </p> <p> <强>四、动画旋转</强> </p> <pre类= & lt; ! DOCTYPE  html> 　　& lt; html  lang=皕h-CN"祝辞 　　,,,& lt; head> 　　,,,,,,,& lt; title>三维立体魔方& lt;/title> 　　,,,,,,,& lt; meta  charset=癠TF-8"比; 　　,,,,,,,& lt; style 类型=拔谋?css"比; 　　* { 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

css如何实现3 d立体魔方