css切图加动画出现的问题

 #content-slide-3 .fourth_liubian{
    width:1282px;
    height:1038px;
    position:absolute;
    z-index:8;
    top:0px;
    left:-320px;
    background-color:white;
    -webkit-clip-path:polygon(320px 0px,961px 0px,1282px 555px,961px 1038px,320px 1038px,0px 555px);
    transform-origin:641px 555px;
    animation:8s fourth_liubian4 forwards;
    -webkit-animation:18s fourth_liubian4 forwards;
    -moz-animation:8s fourth_liubian4 forwards; 
    -o-animation:8s fourth_liubian4 forwards;
}
@-webkit-keyframes fourth_liubian4{
    0%{

        transform:scale(1,1) rotate(0deg);
    }
    100%{

        transform:scale(0,0) rotate(360deg);
    }
}
<div id="content-slide-3">
        <div class="fourth_liubian"></div>
    </div>

请运行以下代码，需求：做一个正六边形，并且给正六边形添加动画，动画效果为正六边形进行缩小的同时进行旋转。出现的问题：切出来的正六边形不添加动画效果时是正常的，但是添加动画效果后，动画效果播放的过程中正六边形的周围会出现一些个不正常的图片干扰，而且每次刷新出现的东西不一样，当动画播放完毕后，图片又回到正常状态。求解答
ps：求另一种切正六边形的方法，要整体的正六边形，拼接的不要，谢谢

个人觉得楼主切的正六边形方式没有错，旋转和缩放也没有问题，但是旋转和缩放组合一起之后就错了，原因应该旋转和缩放之后之前所切的那个位置就变化了，但是还是按照那个方式去切就有问题了，还有就是要切正六边形首先宽高应该一样，没有特别好的方法，建议楼主使用图片，把图片制作成想要的形状，这样应该就不会有问题了。说的有点乱不知道对否