CSS3 3D transform创建立方体
首先建立html结构
然后定义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