CSS3立体球体旋转

1 3D旋转的球体

3D 球体旋转如图,上网址
http://www.webmxx.com/Blog/try1/imgs.html

主要代码如下

布局

     <div class="box">
        <div class="big">
            <div class="small a"></div>
            <div class="small b"></div>
            <div class="small c"></div>
            <div class="small d"></div>
            <div class="small e"></div>
        </div>
      </div>

主要的css属性

.box{perspective:3000px;} //在距离3000px 远处看效果
.big{transform-style:preserve-3d;} //子元素以3D形式展现

2 滑过旋转显示背面图片

http://www.webmxx.com/Blog/try1/rotate.html

这个使用了关于 背面元素显示的一个属性

backface-visibility: hidden; 
-webkit-backface-visibility: hidden; 

参考链接 http://www.w3school.com.cn/cssref/pr_backface-visibility.asp