css探索之路是永无止境，并且充满乐趣的。
今天我们来做一个透明的立方体，以及简单的介绍用到的css属性。

前言

为了便于对比，这里做了两组。提前预报一下，我们用到的属性有 backface-visibility , perspective , perspective-origin , transform-style , transform。一定要考虑到 兼容性。

ps:这里建议先看下css文档，然后再回过来看这篇文章，最好脑补或者写一遍，体会更深一些。

这里假设大家明白或者已经初步了解了上面的提示内容，简单的对上面的进行说明：

  • backface-visibility 定义当元素不面向屏幕时是否可见，有两个值：visible 和 hidden；
  • perspective 设置从何处查看一个元素的角度，该属性只影响 3D 转换元素，设置值的单位是像素px，表示元素距离视图的距离，应用在舞台元素上；
  • perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。默认值为中间位置，50% 50%；X轴向右为正，Y轴向下为正；
  • transform-style 指定嵌套元素是怎样在三维空间中呈现。两个值plat和preserve-3d，后者表示3D透视。这个一般应用在舞台元素上；

上代码

html部分的代码：

1
2
3
4
5
6
7
8
9
10
<div class="test-container">
  <div class="test-cube">
    <div class="test-face test-front">1</div>
    <div class="test-face test-back">2</div>
	<div class="test-face test-top">3</div>
	<div class="test-face test-bot">4</div>
	<div class="test-face test-left">5</div>
	<div class="test-face test-right">6</div>
  </div>
</div>

css部分的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.test-container{
	width: 150px;
	height: 150px;
	margin: 75px auto;
}

.test-cube{
	width: 100%;
	height: 100%;
	backface-visibility: visible;
	--webkit-backface-visibility: visible;
	perspective: 300px;
	-webkit-perspective: 300px;
	perspective-origin: 150% 150%;
	--webkit-perspective-origin: 100% 100%;
	transform-style: preserve-3d;
	--webkit-transform-style: preserve-3d;
}
.test-face{
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-size: 60px;
	color: white;
	position: absolute;
}
/*单个页面*/
.test-front{
    background: rgba(0, 0, 0, 0.3);
	transform: translateZ(50px);
	-webkit-transform: translateZ(50px);
}
.test-back{  
	background: rgba(0, 255, 0, 1);
	color: black;
    transform: rotateY(180deg) translateZ(50px);
    -webkit-transform: rotateY(180deg) translateZ(50px);
}

.test-top{
    background: rgba(196, 196, 0, 0.7);
    transform: rotateX(90deg) translateZ(50px);
    -webkit-transform: rotateX(90deg) translateZ(50px);
}
.test-bot{
    background: rgba(196, 0, 196, 0.7);
	transform: rotateX(90deg) translateZ(-50px);
	-webkit-transform: rotateX(90deg) translateZ(-50px);
}

.test-left{
   background: rgba(0, 0, 196, 0.7);
   transform: rotateY(-90deg) translateZ(50px);
   -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.test-right{
   background: rgba(196, 0, 0, 0.7);
   transform: rotateY(90deg) translateZ(50px);
   -webkit-transform: rotateY(90deg) translateZ(50px);	
}

再次强调需要注意的几个点：

  • perspective 、 perspective-origin 、 transform-style 定义在舞台元素上；
  • transform 定义在具体元素对象上；
  • 空间想象力可以多练习下，先翻转后平移跟先平移后翻转，基准对象是不一样的，所以表现也会有差异的。

end