single_div

九宫格

by carlhong

HTML

<div id="test"></div>

CSS

#test {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 200px auto;
}
#test::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #5dd;
    box-shadow: 0px 105px 0 0px #5dd,
                0px -105px 0 0px #5dd,
                105px -105px 0 0px #5dd,
                105px 105px 0 0px #5dd,
                105px 0px 0 0px #5dd,
                -105px -105px 0 0px #5dd,
                -105px 105px 0 0px #5dd,
                -105px 0px 0 0px #5dd;
}
#test::before {
  //扩大div响应悬浮事件范围
    content: '';
    position: absolute;
    top: -105px;
    right: -105px;
    bottom: -105px;
    left: -105px;
}

#test:hover {
    animation-name: fullRotate;
    animation-duration: 2s;
}

@keyframes fullRotate {
    0% {transform: rotateY(0deg); }
    100%  { transform: rotateY(180deg); }
}