日期:2014-05-17  浏览次数:20518 次

CSS3 3D transform创建立方体

首先建立html结构


然后定义css,关键是透视和style


定义立方体的6个面,一个element是有正反面的,这里都是以div中心先旋转一个角度,比如说back是先旋转180度,这时这个div的z轴射向页面里(默认的是从页面射向外面),然后向页面里100px


cube建立好了之后可以开始定义对cube的transform


最后加上transition


要点:

cube里的元素是一个整体,所有的transform都受到影响

一般是cube里的元素先transform到相应的位置,然后对cube进行transform

transform顺序很重要

transform总是和原始状态比较,不是和当前状态比较,如果没有用transition就没有动画,直接从一个状态变到另一个

transition会负责如何从当前状态到下一个状态,如果你想控制这个过程,应该用CSS3中的animation


http://desandro.github.com/3dtransforms/docs/cube.html