实现立体状物体的旋转展示

先给展示一下效果啊，就是造这么一个立体状，然后鼠标点击之后再移动就可以实现360度无死角旋转了。

此篇用到css比较多，所以先和大家推荐一个写css好用的编辑器，webstorm。用它写css时候可以省很多力气。

直接上代码：

html>
lang="en">

    charset="UTF-8">
    
    
    
    


    
class="father">
        
class="top">
        
class="bottom">
        
class="left">
        
class="right">
        
class="front">
        
class="back">
    

下面分开来介绍：

    
class="father">
        
class="top">
        
class="bottom">
        
class="left">
        
class="right">
        
class="front">
        
class="back">
    

body中定义了父类和子类div，看名字也大概可以看出来，父类div是用来盛放子类的容器，而子类div则是用来表示一个立方体的六个面。

        *{
            margin: 0;
            padding:0;
        }
        body{
            background: rgba(0,0,0,0.5);
        }

这些style的定义无关紧要，可根据个人喜好随意修改。

  .father{
            width:200px;
            height:200px;
            margin:200px auto;
            position: relative;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            /*perspective景深  transform;2D到3D的转换  preserve-3d创建3D环境*/
            -webkit-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -moz-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -ms-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -o-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
        }

立体图形就要涉及到三维了，这里给予介绍二维到三维的转换。

 /* >子代选择器*/
        .father >div{
            height:100%;
            width:100%;
            position: absolute;
            -webkit-box-shadow: 0 0 50px skyblue;
            -moz-box-shadow:  0 0 50px skyblue;
            box-shadow:  0 0 50px skyblue;
            /* x轴  y轴 阴影面积 阴影颜色*/
        }

这是实现立方体的棱阴影效果的css，上述shadow的四个参数的含义也在注释中给出来了。

 .bottom{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateX(90deg) translateZ(-100px) ;
            -moz-transform: rotateX(90deg) translateZ(-100px);
            -ms-transform: rotateX(90deg) translateZ(-100px);
            -o-transform: rotateX(90deg) translateZ(-100px);
            transform: rotateX(90deg) translateZ(-100px);
        }
        .top{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateX(90deg) translateZ(100px) ;
            -moz-transform: rotateX(90deg) translateZ(100px);
            -ms-transform: rotateX(90deg) translateZ(100px);
            -o-transform: rotateX(90deg) translateZ(100px);
            transform: rotateX(90deg) translateZ(100px);
        }
        .left{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateY(90deg) translateZ(100px) ;
            -moz-transform: rotateY(90deg) translateZ(100px);
            -ms-transform: rotateY(90deg) translateZ(100px);
            -o-transform: rotateY(90deg) translateZ(100px);
            transform: rotateY(90deg) translateZ(100px);
        }
        .right{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateY(90deg) translateZ(-100px) ;
            -moz-transform: rotateY(90deg) translateZ(-100px);
            -ms-transform: rotateY(90deg) translateZ(-100px);
            -o-transform: rotateY(90deg) translateZ(-100px);
            transform: rotateY(90deg) translateZ(-100px);
            /* transform执行顺序：从左到右  rotateY是旋转  translateZ是平移*/
        }
        .front{
            background-image: url("image/1.jpg");
            -webkit-transform:translateZ(100px) ;
            -moz-transform: translateZ(100px);
            -ms-transform: translateZ(100px);
            -o-transform:translateZ(100px);
            transform:translateZ(100px)
        }
        .back{
            background-image: url("image/1.jpg");
            -webkit-transform:translateZ(-100px) ;
            -moz-transform: translateZ(-100px);
            -ms-transform: translateZ(-100px);
            -o-transform:translateZ(-100px);
            transform:translateZ(-100px)
        }

这几个样式设置就是将二维的DIV旋转平移而组成立方体的过程了。因为父类大小是200px，下面子类平移的距离都是100px，相反方向各平移100px，这关系就对应了。

为实现旋转效果，js必不可少，引用了jQuery，至于JS的含义，想必看完就能明白了。