JS小实例-点击V字方块旋转

向上  

        i left  top

        0  0    0

        1 100   100

        2 200   200

        3 300   100

        4 400   0

        left = i*100

        如果i<=2

          top = i*100

        否则

          top = 400 - i*100

 

 

 

向右  

        i left  top

        0 400   0

        1 300   100

        2 200   200

        3 300   300

        4 400   400

        top = i*100

        如果i<=2

          left = 400-i*100

        否则

          left = i*100

 

 

向下

        i left  top

        0  0    400

        1 100   300

        2 200   200

        3 300   300

        4 400   400

        left = i*100

        如果i<=2

          top = 400-i*100

        否则

          top = i*100

 

 

向左

        i left  top

        0  0    0

        1 100   100

        2 200   200

        3 100   300

        4 0   400

        top = i*100

        如果i<=2

          left = i*100

        否则

          left = 400-i*100

 

  

    

    

    

  

  

    

    

      

    

    

  

 

 

index.css:

.box_list{

  width: 100px;

  height: 100px;

  background-color: palevioletred;

  text-align: center;

  line-height: 100px;

  font-size: 40px;

  color: white;

}

#box{

  position: relative;

  width: 500px;

  height: 500px;

}