html魔方转动效果,html5+css3实现旋转魔方的点点滴滴

一、知识点1：touch事件的相关内容 touchstart touchmove touchend

和其他常用事件一样，touch事件中的event对象中有许多非常有用的方法与属性，而且通过jQuery/Zepto封装之后的事件对象与原生的事件对象又有所不同，因此死记硬背显然不是最好的方式，为了能够正确的使用，我常常使用如下方式来查阅event对象，此处以zepto中使用为例

$('.box').on('touchstart', function(event) {

console.log(event);

})

这样我就将对应事件的事件对象打印了出来，我可以轻松的查看他的方法，属性。通过这样的方式，我们发现 touchstart touchmove touchend 中有三个TouchList对象，分别是touches，targetTouches, changeTouches, 这三个对象中都保存了当手指触摸到屏幕上时，对应的坐标等信息。由于只有changeTouches能够捕获到手指离开时的坐标，因此，我们在使用的时候，就只关注changeTouches.

二、css3 3D旋转的相关内容

css3的3D效果，我是这样来理解的。

1、首先，需要一个容器，这个容器需要声明一个属性，告诉浏览器这是一个3D空间

.contain { transform-style: preserve-3d; }

当没有设置该属性时，元素将会做平面的3d变化，而不会有立体感

2、其次，我们需要设置视距，我们都知道现实中的近大远小，距离不同，近大远小的比例不同，这里也是一样，因此视距的大小会影响，具体的视点，大约就是我们的眼睛所在位置，默认的视点在屏幕的正中心。

.contain {

perspective: 500px;

}

该属性可以设置在容器元素上，也可以设置在子元素上，当设置在容器元素上时，所有的子元素视点相同，因此同样角度不同位置的子元素会有不同的近大远小形态。而设置在子元素上，所有的子元素看上去形态一样，因为他们有各自的视点，角度没有变化。

示例如下 demo

See the Pen dMXVMr by Ormie (@yangbo5207) on CodePen.

3、设置视点的位置 刚才已经说过，默认的视点位置大约在我们看屏幕的眼睛处，如果我们要修改视点的位置，则需要用到下面的属性.一般来说，我们都不需要修改视点位置

.contain {

perspective-origin: 50% 30px;

}

4、后面的元素是否需要被遮挡？默认情况下，后面的元素是不会被遮挡的，因此我们可以透过前面的元素看到后面的元素，如果需要符合现实的视觉效果，将后面的元素遮挡住，则需要用到下面的设置

.contain { backface-visibility: hidden; }

理解了这些之后，我们就可以使用rotate, translate, scale来进行布局了。

我们来看一个3d布局实例 demo

See the Pen yOJzEK by Ormie (@yangbo5207) on CodePen.

三、如何使用js改变css3的属性