在CSS3中嵌套六边形并悬停效果

Question

我正在尝试使用背景图像在css中创建嵌套六边形。我有3个外六边形，左边是浮动的。每个外六角形包含两个内六边形。一次显示一个内六角。

当我悬停外六边形时，第一个内六角将X转换为150％并将被隐藏，然后第二个内六角将X 0从-150％转换并显示。问题是当我将第一个外六角形中的某些位置悬停时，应用了第二个外六角形悬停。

如何解决这个问题？

HTML：

<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.skillhex {
    width: 100px;
    height: 200px;
    background-color: yellow;
    overflow: hidden;
    visibility: hidden;
    position: relative;
    -webkit-backface-visibility: hidden;
    transform: rotate(120deg);
    float:left;
}
.inhex1 {
    width: 100%;
    height: 100%;
    background-color: orange;
    transform: rotate(-60deg);
    overflow: hidden;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.inhex2 {
    width: 100%;
    height: 100%;
    background-color: yellowgreen;
    visibility: visible;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotate(-60deg);
}
.headhex, .tailhex {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(120deg);
}
.headhex {
}
.tailhex {
    transform: translate(-150%);
}
.skillhex:hover .headhex {
    transform: translate(150%);
    transition-duration: 1s;
}
.skillhex:hover .tailhex {
    transform: translate(0%) rotate(120deg);
    transition-duration: 1s;
}
.bg1 {
    background-image: url(http://www.sciencekids.co.nz/images/pictures/math/number1.jpg) !important;
    background-size: cover;
    background-position: center;
}
.bg2 {
    background-image: url(http://www.getdownintwo.com/wp-content/uploads/2013/06/2-graphic.png);
    background-size: contain;
    background-position: center;
}

Demo