.flip { transform:translate3d(0,0,0); margin:40px; } .flip-box { position:relative; width:110px; height:140px; overflow:hidden; } .flip-item { position:absolute; left:0; top:0; width:100%; height:100%; transition:all .5s ease-in-out; transform-style:preserve-3d; backface-visibility:hidden; /*border:1px solid #ddd; */ box-sizing:border-box; } .flip-item img { width:70px; height:70px; border-radius:100%; margin:32px auto; display:block; } .flip-item-text { position:absolute; bottom:8px; left:0; width:100%; text-align:center; color:#fff; } .flip-item-front { transform:rotateY(0deg); z-index:2; /*background:#fff; */ } .flip-item-back { transform:rotateY(180deg); z-index:1; /*background:#009fff; */ } .flip-item-back .flip-item-text { color:#fff; } .flip-box:hover .flip-item-front { z-index:1; transform:rotateY(180deg); } .flip-box:hover .flip-item-back { z-index:2; transform:rotateY(0deg); } .flip-item-bling { position:absolute; top:50%; left:50%; width:200px; height:200px; margin-top:-100px; margin-left:-100px; background:url(animation.png) center no-repeat; z-index:-1; } .flip-box:hover .flip-item-bling { transform:translate3d(0,0,0); animation:rotate infinite 4s linear; } @keyframes rotate { 0% { transform-origin:center; transform:rotate3d(0,0,1,0deg); } 100% { transform-origin:center; transform:rotate3d(0,0,1,360deg); } }