文档章节

h5-立方体

o
 osc_g8254g7s
发布于 2019/08/19 18:45
字数 531
阅读 0
收藏 0
red

精选30+云产品,助力企业轻松上云!>>>

1.制作一个立方体:首先要有6个面

 

1 <div class="box">
2     <div class="front">front</div>
3     <div class="back">back</div>
4     <div class="left">left</div>
5     <div class="right">right</div>
6     <div class="top">top</div>
7     <div class="bottom">bottom</div>
8 </div>

 

2.具体代码展示在css中:集体描述展示在注释

 

 1     <style>
 2         *{
 3             padding: 0;
 4             margin: 0;
 5         }
 6         .box{
 7             width: 200px;
 8             height: 200px;
 9             margin: 100px auto;
10             position: relative;
11             /*让box默认旋转,方便观察*/
12             transform: rotate3d(1,1,0,-30deg);
13             /*让子元素保留3d变换之后的效果*/
14             transform-style: preserve-3d;
15 
16             /*添加透视景深效果*/
17             perspective: 0px;
18             /*设置透视的观察角度:第一个数值控制左右,第二个数值控制上下*/
19             perspective-origin: 0px 0px;
20         }
21         .box > div{
22             width: 200px;
23             height: 200px;
24             position: absolute;
25             opacity: 0.5;
26         }
27         /*因为立方体的边长是200px,所以正面往前移动100px,不需要其它改变*/
28         .front{
29             background-color: red;
30             transform: translateZ(100px);
31         }
32         /*因为立方体的边长是200px,所以背面往后移动100px,
33         而且显示图文的面是要冲后的,所以需要沿着y轴旋转180度*/
34         .back{
35             background-color: #77ff2b;
36             transform: translateZ(-100px) rotateY(180deg);
37         }
38         /*因为立方体的边长是200px,所以左面往左移动100px,
39         而且显示图文的面是要冲左的,所以需要沿着y轴旋转-90度*/
40         .left{
41             background-color: #47b3ff;
42             transform: translateX(-100px) rotateY(-90deg);
43         }
44         /*因为立方体的边长是200px,所以右面往右移动100px,
45         而且显示图文的面是要冲右的,所以需要沿着y轴旋转90度*/
46         .right{
47             background-color: #ff6fd9;
48             transform: translateX(100px) rotateY(90deg);
49         }
50         /*因为立方体的边长是200px,所以上面往上移动100px,
51         而且显示图文的面是要冲上的,所以需要沿着x轴旋转90度*/
52         .top{
53             background-color: #ff7319;
54             transform: translateY(-100px) rotateX(90deg);
55         }
56         /*因为立方体的边长是200px,所以背面往下移动100px,
57         而且显示图文的面是要冲下的,所以需要沿着x轴旋转-90度*/
58         .bottom{
59             background-color: #b33aff;
60             transform: translateY(100px) rotateX(-90deg);
61         }
62     </style>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
3D全景之ThreeJs

3D全景之ThreeJs 一、前言 随着H5越来越多的被应用到各个领域,3D也越来越频繁的出现在各个H5案例中,今天我们就来讨论一下3D全景的实现。 据百度百科上介绍:720全景是视角超过人的正常视角...

osc_ma60u6gg
2018/02/28
8
0
《前端5分钟》之使用CSS3实现酷炫的3D旋转透视

3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加...

徐小夕
2019/11/21
0
0
Apache kylin概览

一、Apache kylin的核心概念 表(Table ):表定义在hive中,是数据立方体(Data cube)的数据源,在build cube 之前,必须同步在 kylin中。 模型(model):模型描述了一个星型模式的数据结构...

osc_8vgjpfw9
2019/02/18
1
0
题解报告:hdu 1220 Cube

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1220 问题描述   Cowl擅长解决数学问题。 有一天,一位朋友问他这样一个问题:给你一个边长为N的立方体,它被与其侧面平行的平面切割...

osc_sraynp8f
2018/04/01
0
0
立方体解剖

立方体可分为子多维数据集仅用于 ,8,15,20,22,27,29,34,36,38,39,41,43,45,46,和(OEIS A014544 ; Hadwiger 1946;斯科特1947;加德纳1992年,第297页)。这个序列为所谓的Had...

haiming123
2019/08/10
30
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux系统检查用户账户到期时间

如果你在 Linux 上启用了密码策略。密码必须在到期前进行更改,并且登录到系统时会收到通知。如果你很少使用自己的帐户,那么可能由于密码过期而被锁定。在许多情况下,这可能会在无需密码登...

老孟的Linux私房菜
51分钟前
17
0
关于南京哪里有开餐饮费发票?

关于南京哪里有开餐饮费发票?聚焦餐饮行业,谈话〖18 7一電一7 5 3 8一徴一3331〗研究院昨发布数据显示,今年上半年,全国餐饮行业招聘需求增长46.18%,平均月薪6387元.随着餐饮行业的快速...

点击fojewio
今天
7
0
android studio 4.0 打开DDMS

1、先找到AndroidStudio配置的SDK路径; 2、在SDK的/tools/路径下有个monitor.bat 的批处理文件; 3、鼠标连续点击两下monitor.bat这个批处理文件,在屏幕上会打开一个类似CMD的命令行中输入...

chenhongjiang
今天
10
0
如何在Android中使用SharedPreferences来存储,获取和编辑值

问题: Closed . 已关闭 。 This question needs to be more focused. 这个问题需要更加集中。 It is not currently accepting answers. 它当前不接受答案。 Learn more . 了解更多 。 Want...

fyin1314
今天
6
0
【JDK1.8】LinkedList源码分析

LinkedList的特性 LinkedList内部使用双向链表作为存储结构,LinkedList可以理解为链表的扩展对象,封装了常用的和非常用的操作链表的方法。以及在通过索引获取元素时的简单优化,通常Linke...

XuePeng77
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部