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样式
1、
*{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
五、总结
让我们讲讲细节吧!当让这也是最终要的,希望你看到。拼接的过程你们只看到了代码,首先我们制作了六个width:300px与height:300px
的div,我们通过position:absolute
让他们叠加在了一起,你只需要记住绝对定位会让层级重叠就好了z-inde:
可以控制他的层级,好了到最重要的地方了, transform:rotateX(90deg) translateZ(150px);
这里为什么我是先旋转在偏移呢?
总之一句话就是,你右转在向前进 和 你前进在右转你到达的位置是不一样的
就是这个原理。如果你明白了就算是入门了3d还有很多好玩的。等待你慢慢的摸索。
css实现3d立体魔方相关推荐
- android 3d魔方 代码,css实现3d立体魔方的示例代码
今天来做一个简单的3d魔方 先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了 一.我们先准备好们的html代码 3d立体魔方 好了我们html代码就准备完成了,首先我们要有一个3d的思维,在 ...
- CSS实现3D立体动态相册代码!
1.效果展示 你们喜欢玩的3D立体动态相册都在这里了,有手就行哦. 2.创建好路径 创建好一个文件夹,css目录下面创建好css文件,img目录下放好需要展示的图片,创建好html文件,具体如图所示: ...
- css制作3D立体旋转效果
通过纯css制作出3D旋转效果,以展示中国部分知名公司为例: 浏览器实现结果: 6个名片都具有两面,一面图片,一面文字,当鼠标放在图片上时,就会3D旋转成文字的一面. 代码: <!DOCTYPE ...
- 纯HTML加CSS实现3D立体动态相册【超简单、附源码】
近日,收到一男粉丝私信,具体如下: PS:在跟他聊天过程中,我不该笑的,哪个男同胞没有这么让人心疼的一刻呢.所以,在此祝愿他能早日哄好他的女朋友,加油,奥利给~~~ 于是,在他的万般焦急等待下,为他量 ...
- [css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
- php立方体相册源码,纯CSS实现3D的代码(正方体、动态立体图片册、平面的星空)...
本篇文章所说的内容是纯CSS实现3D的代码(正方体.动态立体图片册.平面的星空),代码都非常详细,有需要的朋友可以看一下. 一.正方体 我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面 ...
- 3D立体相册不过是冷锋蓝plus版 html+css
一.话不多,先看效果: 转念一想,好像很久很久没出css特效的文章了,特别是工作之后,更少了.偶然翻看电脑内存的时候,发现这个自己1年多以前写的特效,甚美,又勾起我一段尘封的回忆...我原来也发过3D ...
- 用html3d静态相册带音乐,3D立体动态相册(带背景音乐)HTML+CSS脚本
3D立体动态相册(带背景音乐)HTML+CSS脚本.程序员硬核送礼方式... 动画效果 截图效果: 照片准备: 命名为1.2.3.-- 音乐: 将文件依次放在各自文件夹中: CSS文本,命名:inde ...
- html立体魔方图片制作,AI软件如何打造立体魔方 Ai如何使用3D效果快速生成三个面贴图立体魔方...
矢量图制作软件Adobe Illustrator如何快速生成立体魔方?魔方是立体.多面的,使用Ai软件自带的3D效果三种之一的凸出和斜角,能创建具有凸出和斜角效果的立体魔方.在3D效果中,选择三个面贴 ...
- html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档 以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
最新文章
- 转载LINQ优点 自己学习用的
- TechParty Mini.0
- 告诉你,初学网络安全应该怎样去学呢?安排的明明白白的
- 在虚拟机中安装LINUX
- 准时制 jit 减少库存
- 2020年7月编程语言排行榜来喽,R编程语言创历史最高纪录
- 多线程小抄集(新编四)
- Linux下的ELF文件、链接、加载与库(含大量图文解析及例程)
- linux发包密码,linux下网络发包工具(cp过来的)
- 又是一年末来临,年终奖金的算法
- 处理兼容问题:对于某些css3属性需要加前缀?
- python前景如何调用带有event参数的方法_13、第七 - 网络编程基础 - Python中协程EVENT()函数-事件函数...
- jpype测试报错,找不到类raise _RUNTIMEEXCEPTION.PYEXC(Class %s not found % name)
- H264--1--编码原理以及I帧B帧P帧
- STC学习:霍尔开关器件
- rust腐蚀机场蓝卡_rust怎么弄蓝卡和红卡
- 〖工具〗Ladon 8.4 Cobalt Strike插件发布
- Ubuntu 16.04.5 (x86_64)下安装CUDA10 for 深度学习
- 双网卡共享上网的完全解决方案
- 慢慢来,等待也是一种美好