css3制作立方体

css?3制作立方体

先建一div，设置位置，背景颜色及大小。再接着设置立方体其他六个面，可用ul与li；再用定位将六张图定位到一个位置接着再给每个面设置颜色，规定好各个面的序号为123456；接下来开始制作立方体，立方体一共六个而，是一个立体图案，所以需要给父元素一个3d环境，即transform-style：preserve-3d；首先明确，第一个面已经确定，那么就开始改其他面；第二个面向后推，那么给它一个沿y轴的位移（这里给一个负值向内推），即位移大小是立方体的边长，但这样做2和1的效果一样，只是位置不一样，此时即使2绕y轴旋转180度，即达到镜面效果。使3到1的左侧，将3沿x轴向外推与边长等大的位移，此时为负值，再以右边为y轴旋转90度，旋转边是3的右边所以设置旋转原点即可；再接着将5放置在顶部，即将5沿y轴负方向移动边长，接着沿x轴旋转90度，旋转原点是五的底部的线，5号位放置结束，那么46可参照35来放。
观看效果即可通过划过旋转来看，同时也要设置旋转的时间。

<title>立方体</title> 
   <style type="text/css">  
     li{
   list-style: none;}  
      a{
   text-decoration:none;}    
      img{
    border:0;     display:block;}    *{
   margin:0;padding:0;}   
      html,body{
   height:100%;}    
      .box{
           width:200px;        height