图层堆叠显示，并按照中心带你旋转

HTML层：

<div id="basicInformationBox" class="tab-panel-parent1 common-hide1">
   <div class=u-tab1>
      <span class='u-tab-btn1 active1' >基本情况</span>
   </div>
   <div id="shipDetailPanel1" class="tab-panel-child1 active1">
      <table>
         <tr>
            <td>
               <div class="lonLatPicture">
                  <span class="boat"></span>
                  <span class="bow"></span>
                  <span class="shipTraceDirection"></span>
                  <span class="waveHeight"></span>
                  <span class="flowVelocity"></span>
               </div>
            </td>



            <td>
            更新时间：<td id="1"></td>
            船舶名称：<td id="2"></td>
            船舶名称：<td id="3"></td>
            船舶名称：<td id="4"></td>

            </td>

            <td>
            <div class="bow"></div>
            <p>船首向</p>

            <div class="shipTraceDirection"></div>
            <p>船迹向</p>

            <div class="windDirection"></div>
            <p>风向风速(KTS)</p>

            <div class="waveHeight"></div>
            <p>浪向浪高(有效浪高)</p>

               <div class="flowVelocity"></div>
            <p>流向流速(KTS)</p>
            </td>
         </tr>
      </table>
   </div>
</div>

js代码：

basicInformationBox = layer.open({
    type : 1,
    shade : 0,
    closeBtn : 1,
    btnAlign : 'c',
    resize : false,
    //move : true,
    fixed: false,
    offset : [ '100px', '255px' ],
    area : '430px',
    maxmin : false,
    title : shipObj.shipname,
    //btn : [ '关闭' ],
    content : $("#basicInformationBox"),
    success : function(layerdom, index) {
    },
    end : function() {
        closeShipLineForCustomShip(shipDetailBoxVM.shipObj.imo);
        CustomAndSelectedAisShipFeatureLayer && CustomAndSelectedAisShipFeatureLayer.removeSelected();
    }
});

css代码：

#basicInformationBox .bow{
   background-image: url(../../img/index/bow.png);
}

#basicInformationBox .bow {
   height: 12px;
   width: 38px;
}
#basicInformationBox .windDirection{
   background-image: url(../../img/index/wind23-27right.png);
}

#basicInformationBox .windDirection {
   height: 28px;
   width: 38px;
}
#basicInformationBox .shipTraceDirection{
   background-image: url(../../img/index/shipTraceDirection.png);
}
#basicInformationBox .shipTraceDirection{
   height:12px;
   width:38px;
}
#basicInformationBox .lonLatPicture{
   background-image: url(../../img/index/lonLat.png);
}
#basicInformationBox .lonLatPicture{
   height:258px;
   width:268px;
   position:relative;
}

#basicInformationBox .flowVelocity{
   background-image: url(../../img/index/flowVelocity.png);
}
#basicInformationBox .flowVelocity{
   height:28px;
   width:23px;
}


#basicInformationBox .waveHeight{
   background-image: url(../../img/index/waveHeight.png);
}
#basicInformationBox .waveHeight{
   height:12px;
   width:38px;
}
#basicInformationBox .boat{
   background-image: url(../../img/index/boat.png);
}
#basicInformationBox .boat{
   height:82px;
   width:19px;
}
.lonLatPicture .boat{
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: 3px;
   margin-top: 5px;
   transform: rotate(34deg);
}
.lonLatPicture .bow{
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -4px;
   margin-top: 5px;
   transform: rotate(50deg);
}
.lonLatPicture .waveHeight{
   position: absolute;
   left: 65%;
   top: 26%;
   transform: rotate(138deg);
}
.lonLatPicture .flowVelocity{
   position: absolute;
   left: 27%;
   top: 63%;
}
#shipDetailPanel1 td{
   position: relative;
}