Flip effect in IE 11

The 3D effect may not work well on all browsers, I will try to fix it asap but now please try to use an other style for service box. Please follow the steps below to do it. If you don't want to change, please give us some time, we will try to fix the issue and send you update then. Thanks you! 1. Copy css block below to mixin.less .middle-center(){ position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } 2. Open pages.less and search "09 Services Boxes" file then replace style (from line 739 to line 871) of "services box" by css below: /* 09 Services Boxes ================================================== */ .services-box { display:block; position:relative; z-index:2; text-align:center; width:100%; min-height:250px; background:transparent; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; border:1px solid #eceef0; border-radius:5px; margin-bottom:20px; .front { opacity: 1; .transition (all, 0.5s, ease-out); .middle-center(); padding:10px; h3 { margin:10px 0; font-family: "Raleway"; font-weight:200; } i { font-size:80px; text-align:center; } img { margin:20px auto; } } .back { background: none repeat scroll 0 0 @base_color; border-radius: 5px; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transform: scale(0.3);/* Saf3.1+, Chrome */ -moz-transform: scale(0.3); /* FF3.5+ */ -ms-transform: scale(0.3); /* IE9 */ -o-transform: scale(0.3); /* Opera 10.5+ */ transform: scale(0.3); .transition (all, 0.5s, ease-out); width: 100%; padding:10px; h3 { color:#fff; font-family: "Raleway"; font-weight:200; margin:10px 0; } p { color:#fff; margin:10px 0; } } &:hover .front { opacity: 0; -webkit-transform: scale(0.3);/* Saf3.1+, Chrome */ -moz-transform: scale(0.3); /* FF3.5+ */ -ms-transform: scale(0.3); /* IE9 */ -o-transform: scale(0.3); /* Opera 10.5+ */ transform: scale(0.3); } &:hover .back { opacity: 1; -webkit-transform: scale(1);/* Saf3.1+, Chrome */ -moz-transform: scale(1); /* FF3.5+ */ -ms-transform: scale(1); /* IE9 */ -o-transform: scale(1); /* Opera 10.5+ */ transform: scale(1); } } Cheers