正方体画法及transform坐标系理解

今天来画两个正方体，初步理解下transform 3d概念。

_config.yml

第一个正方体的元素背面可见，第二个不可见，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>cube</title>
<style type="text/css">
	body{
		-webkit-perspective: 800px;
		   -moz-perspective: 800px;
		     -o-perspective: 800px;
		        perspective: 800px;
	}
	.cube{
		position: absolute;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		width: 100px;
		height: 100px;
		margin:50px;
	}

	.c2{
		position: absolute;
		left:300px;
	}

	.c2>div{
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

	}
	.cube>div{
		position: absolute;
		width: 100%;
		height: 100%;
		border: 1px solid #ccc;
		background: rgba(255,255,255,.8);
		box-shadow: inset 0 0 20px rgba(0,0,0,.2);
		font-size: 100px;
		line-height: 100px;
		text-align: center;
		color: #333;
	}

	.front{
		transform: translateZ(50px);
		-webkit-transform: translateZ(50px);
	}

	.back{
		transform: rotateY(180deg) translateZ(50px);
		-webkit-transform: rotateY(180deg) translateZ(50px);
	}

	.top{
		transform: rotateX(90deg) translateZ(50px);
		-webkit-transform: rotateX(90deg) translateZ(50px);
	}

	.bottom{
		transform: rotateX(-90deg) translateZ(50px);
		-webkit-transform: rotateX(-90deg) translateZ(50px);
	}

	.left{
		transform: rotateY(-90deg) translateZ(50px);
		-webkit-transform: rotateY(-90deg) translateZ(50px);
	}

	.right{
		transform: rotateY(90deg) translateZ(50px);
		-webkit-transform: rotateY(90deg) translateZ(50px);
	}

</style>
</head>
<body>
	<div class="cube c1">
		<div class="front">1</div>
		<div class="back">2</div>
		<div class="left">3</div>
		<div class="right">4</div>
		<div class="top">5</div>
		<div class="bottom">6</div>
	</div>
	<div class="cube c2">
		<div class="front">1</div>
		<div class="back">2</div>
		<div class="left">3</div>
		<div class="right">4</div>
		<div class="top">5</div>
		<div class="bottom">6</div>
	</div>
</body>
</html>

其中，transform-style:preserve-3d; 保证所有子元素都处于同一个三维空间内，也就是告诉浏览器你是想用这些元素做一个三维场景，而不仅仅只是要单个元素的简单三维效果。

position:absolute;是一个习惯做法，因为三维物体并不符合一般平面网页内容的排版，所以我们会比较多地希望它不要占据布局空间。

一旦构成正方体的6个div位置确定后，就可以操作它们的父元素div.cube来整体移动、旋转这个正方体。

这里需要理解的是transform的顺序，我们都可能像transform: rotateY(45deg) translateX(100px);这样使用多个变换函数。这种时候，需要意识到变换函数的顺序。这是因为，每一个变换函数不仅改变了元素，同时也会改变和元素关联的transform坐标系，当变换函数依次执行时，后一个变换函数总是基于前一个变换后的新transform坐标系。

例如，下面一个包含两个变换函数的transform的效果： _config.yml

如果交换这两个变换函数的顺序，是这样的效果：

_config.yml

相信有了这两幅图，会比较好理解。这里概念有些不同，因为我们之前在数学中学习的都是在一个空间直角坐标系中进行的移动变换，而这里，每个div元素都有自己对应的直角坐标系。而且随着每次的变换进行，坐标系也会进行着变换。

最后需要注意的是，perspective和perspective-orgin的书写位置，当为元素定义perspective和perspective-origin属性时，其子元素会获得透视效果，而不是元素本身。

本文参考自segmentfault

Written on February 5, 2017