立方体模型

本周运用HTML和css3制作一个立方体效果，增强了对css3空间布局的理解，其中正方体每个面都被图片完全覆盖，正方体外部嵌套一个同样结构的正方体，总布局使用keyframes动画效果循环播放，其中外围正方体两侧面用视频填充，且独立旋转，效果图如下：

基本思想：每个盒子、元素都是用absolute绝对定位，在正方体每个面初始位置相同且重合的基础上，通过改变每个面的rotate、translate属性，使之拼装成正方体。最后使用HTML5插入媒体文件。

基本代码如下：

.stage{
	-webkit-perspective:1000px;
	width: 300px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
	position: absolute;
}

.cube{
	-webkit-animation:my3d 12s linear infinite;
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(-20deg) rotateY(-20deg);
}
.cube *{
	position: absolute;
	width: 100%;
	height: 100%;
}


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

.back{
	-webkit-transform:rotateX(180deg) translateZ(150px);
}

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

.button{
	-webkit-transform:rotateX(-90deg) translateZ(150px);
}

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

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

疑问：

1. 有时打开后内部正方体部分面无法加载，需刷新网页。
2. canvas无法理解初始坐标，画图位置难以把握。