h5-立方体

2019-08-19 18:53:56 阅读：183 来源： 互联网

标签：color 100px transform h5 background 立方体 200px

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>

标签：color,100px,transform,h5,background,立方体,200px
来源： https://www.cnblogs.com/FengBrother/p/11378903.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

h5-立方体