html5制作3d效果图,一篇文章教会你利用html5和css3实现3D立方体效果图
【一、项目背景】
随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果。
【二、项目分析】
想要利用CSS3实现3D立方体,就要清楚立方体是由六个面组成,分上下左右和前后,考虑这些可以帮助我们更好的融入CSS3的代码。
因此我设置了6个div,作为立方体的6个面。因为定位的原因,一开始所有的盒子都是面对着屏幕这面的,因此要赋予每个面不一样的值,即不一样的位置它才能展现出来。
【三、需要的工具】
Adobe Dreamweaver
【四、项目目标】
实现3的l立方体旋转,鼠标移上去实现缩放效果。
【五、项目实现】
1、打开Adobe Dreamweaver,新建html文档。把标题改为“3d立方体”。
2、在body标签,创建一个div盒子 ,给它class属性,在外层div里面在创建6个div表示立方体的六个面,同样给它们 class属性。
3、创建CSS样式
.box {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
transition: all 2s;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(-15deg);
}
.box:hover {
transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
}
.box .box-2 {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 1.2em;
position: absolute;
top: 0;
left: 0;
}
.box .box-2:nth-child(1) {
/*小立方体第一面*/
background: rgba(225,0,0,0.5);
transform: rotateX(90deg) translateZ(50px); #角度 偏移量
}
.box .box-2:nth-child(2) {
/*小立方体第二面*/
background: rgba(255,255,0,0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.box .box-2:nth-child(3) {
/*小立方体第三面*/
background: rgba(225,0,255,0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.box .box-2:nth-child(4) {
/*小立方体第四面*/
background: rgba(0,255,0,0.5);
transform: rotateY(90deg) translateZ(50px);
}
.box .box-2:nth-child(5) {
/*小立方体第五面*/
background: rgba(225,0,0,0.5);
transform: translateZ(50px);
}
.box .box-2:nth-child(6) {
/*小立方体第六面*/
background: rgba(0,0,255,0.5);
transform: rotateY(180deg) translateZ(50px);
}
html5制作3d效果图,一篇文章教会你利用html5和css3实现3D立方体效果图相关推荐
- html5把六张图片做成立方体,一篇文章教会你利用html5和css3实现3D立方体效果图...
[一.项目背景] 随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果. [二.项目分析] 想要利用CSS3 ...
- 一篇文章教会你利用Python网络爬虫获取电影天堂视频下载链接
[一.项目背景] 相信大家都有一种头疼的体验,要下载电影特别费劲,对吧?要一部一部的下载,而且不能直观的知道最近电影更新的状态. 今天小编以电影天堂为例,带大家更直观的去看自己喜欢的电影,并且下载下来 ...
- 一篇文章教会你利用Python网络爬虫获取素材图片
点击上方"IT共享之家",进行关注 回复"资料"可获赠Python学习福利 [一.项目背景] 在素材网想找到合适图片需要一页一页往下翻,现在学会python就可 ...
- python网络爬虫_一篇文章教会你利用Python网络爬虫获取穷游攻略
点击上方"IT共享之家",进行关注 回复"资料"可获赠Python学习福利 [一.项目背景] 穷游网提供原创实用的出境游旅行指南.攻略,旅行社区和问答交流平台, ...
- 一篇文章教会你利用Python网络爬虫实现豆瓣电影采集
点击上方"IT共享之家",进行关注 回复"资料"可获赠Python学习福利 [一.项目背景] 豆瓣电影提供最新的电影介绍及评论包括上映影片的影讯查询及购票服务. ...
- 一篇文章教会你利用Python网络爬虫获取分类图片
点击上方"IT共享之家",进行关注 回复"资料"可获赠Python学习福利 [一.项目背景] 博海拾贝是一支互联网从业者在线教育的团队,扎根于中国教育行业以及互 ...
- 一篇文章教会你使用HTML5 SVG 标签
[一.项目背景] SVG 表示可伸缩矢量图形,这是一门用于描述 2D 图形的语言,图形应用使用 XML 编写,然后 XML 由 SVG 阅读器程序呈现.支持三种类型的图形对象:矢量图形形状(例如,由直 ...
- 利用python从网络上爬取图片_一篇文章教会你利用Python网络爬虫抓取王者荣耀图片...
点击上方"IT共享之家",进行关注 回复"资料"可获赠Python学习福利 [一.项目背景] 王者荣耀作为当下最火的游戏之一,里面的人物信息更是惟妙惟肖,但受到 ...
- 如何用python搜索要用的素材_一篇文章教会你利用Python网络爬虫获取素材图片
[一.项目背景] 在素材网想找到合适图片需要一页一页往下翻,现在学会python就可以用程序把所有图片保存下来,慢慢挑选合适的图片. [二.项目目标] 1.根据给定的网址获取网页源代码. 2.利用正则 ...
最新文章
- Agile Manifesto and principle
- Android安全加密:消息摘要Message Digest
- K近邻法(KNN)原理小结
- 小米max2 android p,这就是小米Max2?6.4英寸超大屏幕配置大升级
- ISCSI 1-由零开始
- 【解决问题】useBean类属性[com.cheng.pojo.People]的值无效导致HTTP500问题
- git设置全局账号密码_jenkins2.222使用之二、总体设置
- 北京环球度假区:尚未发布票务信息,未面向公众销售任何门票
- java 线程map_map集合分割以及多线程处理数据
- 微信小程序 ---- 学习目标认识小程序
- 2021年中国中频等离子体激发市场趋势报告、技术动态创新及2027年市场预测
- Oracle Restart能够用来给Oracle GoldenGate 做 High Availability 使用么?
- [基础] Array.prototype.indexOf()查询方式
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充
- PR、PS小技巧汇总
- 计算机安全威胁防范,计算机网络安全威胁及防范措施
- 卢菲菲记忆课程(一、了解记忆认识大脑)
- Cisco *** Client 报错问题
- 完美融入云原生的无代码平台 iVX编辑器实战
- [翻译]为EXPRESSION WEB 4添翼—如何支持HTML5设计开发!
热门文章
- OmniGraffle for Mac 7.16中文版 — 思维导图 流程图工具
- 【LVGL】使用PC 模拟器搭建LVGL开发环境
- 【Java设计模式】原型模式
- python中exp函数_python中exp函数如何实现指数计算?
- LTspice基本使用(以NMOS的I-V特性为例)
- Android Bmob--免费的网络存储的使用
- 苹果6访问限制密码4位_破解6位密码只需4秒!教你3步设置强密码挡住黑客
- 华为nova8和华为nova7的区别
- Picard工具 - 简介
- DCNv2_latest Linux Mint 下编译