html设置立方体,CSS3 3D transform创设立方体

CSS3 3D transform创建立方体

首先建立html结构

1

2

3

4

5

6

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

.container {

width: 200px;

height: 200px;

position: relative;

perspective: 1000px;

}

#cube {

width: 100%;

height: 100%;

position: absolute;

transform-style: preserve-3d;

}

#cube figure {

width: 196px;

height: 196px;

display: block;

position: absolute;

border: 2px solid black;

}

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

#cube .front { transform: rotateY( 0deg ) translateZ( 100px ); }

#cube .back { transform: rotateX( 180deg ) translateZ( 100px ); }

#cube .right { transform: rotateY( 90deg ) translateZ( 100px ); }

#cube .left { transform: rotateY( -90deg ) translateZ( 100px ); }

#cube .top { transform: rotateX( 90deg ) translateZ( 100px ); }

#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }

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

#cube.show-front { transform: translateZ( -100px ) rotateY( 0deg ); }

#cube.show-back { transform: translateZ( -100px ) rotateX( -180deg ); }

#cube.show-right { transform: translateZ( -100px ) rotateY( -90deg ); }

#cube.show-left { transform: translateZ( -100px ) rotateY( 90deg ); }

#cube.show-top { transform: translateZ( -100px ) rotateX( -90deg ); }

#cube.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }

最后加上transition

#cube { transition: transform 1s; }

要点：

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

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

transform顺序很重要

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

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

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