h5头像图片旋转css3精确控制每个图片的位置

阳光穿透心脏的1/2处 2022-06-08 13:28 198阅读 0赞

h5头像图片旋转css3精确控制每个图片的位置：  
1.下面是需要的效果图：  
![这里写图片描述][SouthEast]  
2.用到的图片有：  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
![这里写图片描述][SouthEast 3]

<div id="box1Kuang1">
        <div class="con-show01 mar-top1 mar-left1">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top1">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top1">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top1">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top1">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
    
        <div class="clearfix"></div>
    
        <div class="con-show01 mar-top2 mar-left2">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top2">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top2">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top2">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
    
        <div class="clearfix"></div>
    
        <div class="con-show01 mar-top3 mar-left3">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top3">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top3">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top3">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
        <div class="con-show01 mar-top3">
            <div class="con-show02">
                <div class="con-show03">
                    <img src="ossweb-img/hexagon.png">
                </div>
            </div>
        </div>
    </div>
    
    $REM:            24;//rem unit
    @function REM($n){
        @return $n/$REM*1rem;
    }
    #box1Kuang1 {
           width: REM(517);
           height: REM(305);
           margin: 0 auto;
           background: url(../ossweb-img/box1_kuang1.png) 0 0 no-repeat;
           background-size: 100% 100%;
           margin-top: REM(30);
           .con-show01 {
               width: REM(94);
               height: REM(108);
               float: left;
               margin-left: REM(0);
               overflow: hidden;
               transform: rotate(120deg);
               .con-show02 {
                   width: REM(94);
                   height: REM(108);
                   overflow: hidden;
                   transform: rotate(-60deg);
                   .con-show03 {
                       width: REM(94);
                       height: REM(108);
                       overflow: hidden;
                       transform: rotate(-60deg);
    
                       background: url(../ossweb-img/prize_libao2.png) no-repeat 50% center;
                       background-size: auto 100%;
    
                       &>img {
                           position: absolute;
                           top: 0;
                           left: 0;
                           width: 100%;
                           height: 100%;
                       }
                   }
               }
               &.mar-top1 {
                   margin-top: REM(15);
               }
               &.mar-top2 {
                   margin-top: REM(-58);
               }
               &.mar-top3 {
                   margin-top: REM(-58);
               }
               &.mar-left1 {
                   margin-left: REM(30);
               }
               &.mar-left2 {
                   margin-left: REM(78);
               }
               &.mar-left3 {
                   margin-left: REM(30);
               }
           }
       }

主要是利用了transform来对图片进行旋转的控制。

[SouthEast]: /images/20220608/66d016000ee64783b6cbce5b00360b70.png
[SouthEast 1]: /images/20220608/3701d07d8acd4c8ea2571587e99e32b1.png
[SouthEast 2]: /images/20220608/421a40b507254efe99745b258d3b8691.png
[SouthEast 3]: /images/20220608/986eb12228774524b9f4f00da544871f.png