Rotation Boxes

9 Boxes Rotated X & Y Centre Box has no movement

by Dan Wright

HTML

<div id="skillsBox">
    <div id="skill1Container" class="box">
        <div id="skill1Card" class="shadow">
            <div class="face">
                <p>Skill Set 1</p>
            </div>
            <div class="back face">
                <p>So many skills 1</p>
            </div>
        </div>
    </div>
    <div id="skill2Container" class="box">
        <div id="skill2Card" class="shadow">
            <div class="face">
                <p>Skill Set 2</p>
            </div>
            <div class="back face upsideDown">
                <p>So Many Skills 2</p>
            </div>
        </div>
    </div>
    <div id="skill3Container" class="box">
        <div id="skill3Card" class="shadow">
            <div class="face">
                <p>Skill Set 3</p>
            </div>
            <div class="back face">
                <p>So Many Skills 3</p>
            </div>
        </div>
    </div>
    <div id="skill4Container" class="box">
        <div id="skill4Card" class="shadow">
            <div class="face">
                <p>Skill Set 4</p>
            </div>
            <div class="back face upsideDown">
                <p>So Many Skills 4</p>
            </div>
        </div>
    </div>
    <div class="box centerBox">
        <p>skills</p>
    </div>
    <div id="skill5Container" class="box">
        <div id="skill5Card" class="shadow">
            <div class="face">
                <p>Skill Set 5</p>
            </div>
            <div class="back face upsideDown">
                <p>So Many Skills 5</p>
            </div>
        </div>
    </div>
    <div id="skill6Container" class="box">
        <div id="skill6Card" class="shadow">
            <div class="face">
                <p>Skill Set 6</p>
            </div>
            <div class="back face">
                <p>So many skills 6</p>
            </div>
        </div>
    </div>
    <div id="skill7Container" class="box">
        <div id="skill7Card" class="shadow">
            <div...

CSS

#skillsBox {
    width:225px;
    height:225px;
}
#skill1Container {
    color:green;
}
#skill2Container {
    color:red;
}
#skill3Container {
    color:blue;
}
#skill4Container {
    color:black;
}
#skill5Container {
    color:yellow;
}
#skill6Container {
    color:purple;
}
#skill7Container {
    color:orange;
}
#skill8Container {
    color:pink;
}
.centerBox {
    text-align:center;
}
.box {
    width:75px;
    height:75px;
    float:left;
    z-index:-1;
    perspective:1000;
}
#skill1Card, #skill3Card, #skill6Card, #skill8Card {
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:all 1.0s linear;
}
#skill1Container:hover #skill1Card, #skill3Container:hover #skill3Card, #skill6Container:hover #skill6Card, #skill8Container:hover #skill8Card {
    transform:rotateY(180deg);
}
#skill2Card, #skill4Card, #skill5Card, #skill7Card {
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:all 1.0s linear;
}
#skill2Container:hover #skill2Card, #skill4Container:hover #skill4Card, #skill5Container:hover #skill5Card, #skill7Container:hover #skill7Card {
    transform:rotateX(180deg);
}
.face {
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
}
.face.back {
    display:block;
    transform:rotateY(180deg);
    box-sizing:border-box;
    color: red;
    text-align: center;
    background-color: #aaa;
}
.upsideDown p {
    transform:rotateZ(-180deg);
}