本周运用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);
}
疑问:
- 有时打开后内部正方体部分面无法加载,需刷新网页。
- canvas无法理解初始坐标,画图位置难以把握。