h5-立方体
1.制作一个立方体:首先要有6个面
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
2.具体代码展示在css中:集体描述展示在注释
<style>
*{
padding:;
margin:;
}
.box{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/*让box默认旋转,方便观察*/
transform: rotate3d(1,1,0,-30deg);
/*让子元素保留3d变换之后的效果*/
transform-style: preserve-3d; /*添加透视景深效果*/
perspective: 0px;
/*设置透视的观察角度:第一个数值控制左右,第二个数值控制上下*/
perspective-origin: 0px 0px;
}
.box > div{
width: 200px;
height: 200px;
position: absolute;
opacity: 0.5;
}
/*因为立方体的边长是200px,所以正面往前移动100px,不需要其它改变*/
.front{
background-color: red;
transform: translateZ(100px);
}
/*因为立方体的边长是200px,所以背面往后移动100px,
而且显示图文的面是要冲后的,所以需要沿着y轴旋转180度*/
.back{
background-color: #77ff2b;
transform: translateZ(-100px) rotateY(180deg);
}
/*因为立方体的边长是200px,所以左面往左移动100px,
而且显示图文的面是要冲左的,所以需要沿着y轴旋转-90度*/
.left{
background-color: #47b3ff;
transform: translateX(-100px) rotateY(-90deg);
}
/*因为立方体的边长是200px,所以右面往右移动100px,
而且显示图文的面是要冲右的,所以需要沿着y轴旋转90度*/
.right{
background-color: #ff6fd9;
transform: translateX(100px) rotateY(90deg);
}
/*因为立方体的边长是200px,所以上面往上移动100px,
而且显示图文的面是要冲上的,所以需要沿着x轴旋转90度*/
.top{
background-color: #ff7319;
transform: translateY(-100px) rotateX(90deg);
}
/*因为立方体的边长是200px,所以背面往下移动100px,
而且显示图文的面是要冲下的,所以需要沿着x轴旋转-90度*/
.bottom{
background-color: #b33aff;
transform: translateY(100px) rotateX(-90deg);
}
</style>
h5-立方体的更多相关文章
- 打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连 ...
- (六)HTML5立方体动画设置
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 旺财速啃H5框架之Bootstrap(三)
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
随机推荐
- C++面试常见问题——02动态分配内存
动态分配内存 C++动态内存 C++程序中内存分为两个部分 堆:程序中未使用的内存,在程序运行时可用于动态分配内存. 栈:函数内部申明的所有变量都将占用栈内存. 很多时候不知道一个程序到底需要多少内存 ...
- 干货分享:想要写好Proposal,这四个问题必须解决
当大家确定了毕业论文选题之后,下一步就是着手写开题报告,也就是proposal.开题报告或者说是研究计划要回答四个问题:为什么这个问题重要,为什么这个问题很难解决,为什么现在要考虑解决这个问题,为什么 ...
- element-ui实现自定义多个文件上传
这里强调下是:aixos是原始的,不要qs封装过的,不然不识别传值传不过去 <el-upload action="/admin/borrow/borrowEdit" list ...
- 前端第一篇---前端基础之HTML内容
前端基础之HTML内容 阅读目录(Content) 一.HTML初识 1.web服务本质 2.HTML是什么 3.HTML不是什么 二.HTML文档结构 三.HTML标签格式 四.HTML注释 五.H ...
- PHP的变量作用域-常亮-全局变量-表单提交变量
一.变量的作用域 作用域是指在一个脚本中某个变量在哪些地方可以使用或可见. 内置超级全局变量可以在脚本的任何地方使用和可见. 常量,一旦被声明,将可以在全局可见.也就是说,他们可以在函数内外使用. 在 ...
- 由于找不到msvcp100.dll无法继续执行代码
最近重装系统之后安装mysql, 执行 mysqld install 命令时出现 : 由于找不到msvcp100.dll无法继续执行代码... 解决办法 下载 Microsoft Visual C++ ...
- yarn storm spark
单机zookeeper http://coolxing.iteye.com/blog/1871009 storm http://os.51cto.com/art/201309/411003_2.htm ...
- 直播课(1)如何通过数据劫持实现Vue(mvvm)框架
19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...
- iOS内存管理布局及管理方案-理论篇
苹果设备备受欢迎的背后离不开iOS优秀的内存管理机制,那iOS的内存布局及管理方案是怎样的呢?我们一起研究下. 内存管理分为五大块 栈区(stack):线性结构,内存连续,系统自己管理内存,程序运行记 ...
- 吴裕雄--天生自然C++语言学习笔记:C++ 基本语法
C++ 程序可以定义为对象的集合,这些对象通过调用彼此的方法进行交互. 对象 - 对象具有状态和行为.例如:一只狗的状态 - 颜色.名称.品种,行为 - 摇动.叫唤.吃.对象是类的实例. 类 - 类可 ...