html实现正方体原理,CSS3 实现正方体

之前用css3实现卡牌翻转，为了加深理解，尝试实现立方体效果

最终效果

demo

代码

立方体

*{margin: 0;padding: 0;}

.stage{position: relative;margin: 300px 0 0 300px;perspective: 800px;width: 200px;height: 200px;}

.container{width: 200px;height: 200px;position: absolute;transform-style:preserve-3d;transition: all 3s;}

.face{width: 100%;height: 100%;position: absolute;left: 0;top: 0;text-align: center;line-height: 200px;font-size: 50px;color: #fff;border: 1px solid #ccc;opacity: 0.3;background: #999;}

.f1{transform: rotateX(90deg) translateZ(100px);}

.f2{transform: translateZ(-100px);}

.f3{transform: rotateX(90deg) translateZ(-100px);}

.f4{transform: translateZ(100px);}

.f5{transform: rotateY(90deg) translateZ(100px);}

.f6{transform: rotateY(90deg) translateZ(-100px);}

旋转

1

2

3

4

5

6

var btn = document.getElementById('rot');

var cont = document.getElementById('cont');

btn.addEventListener('click',function(){

cont.style.transform = 'rotateY(180deg)';

},false);

首先我们需要一个舞台stage,方便我们设置perspective(透视值)

然后我们还需要一个container做旋转的容器，在container上面我们需要设置transfor-style，方便container下面的子元素转换成3d元素。

接着我们就可以开始给face安排位置

贴一张坐标图方便理解

坐标图

我们拿f1这一面做理解，其他的面都是相似的。

假如我们想让f1这一面在正方体的顶部，我们首先需要让f1沿着x轴旋转90度(rotateX(90deg)),现在f1应该是垂直于我们的显示屏，我们再让f1位移到顶部，理论上来说现在应该是用translateY(100px)来做位移。但是这样是看不到效果的，因为在我们旋转的时候，坐标轴也会随着旋转，也就是之前Y轴的方向。在我们沿着X轴旋转90度之后，现在如果要往上移动，就要用translateZ来实现了(这里的坐标轴变换是关键)

现在我们只需要把其他几个面沿着这个思路来做，效果就出来了

参考资料