.advanced_addons_flip_box {
position: relative;
transform-style: preserve-3d;
transition: all .5s ease;
height: 300px;
perspective: 700px;
}
.advanced_addons_flip_box_front,
.advanced_addons_flip_box_back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition-duration: .5s;
transition-property: all;
transition-timing-function: ease;
}
.advanced_addons_flip_box.aae-flip-top:hover .advanced_addons_flip_box_front {
transform: rotateX(180deg);
}
.advanced_addons_flip_box.type-1 .advanced_addons_flip_box_front {
background: #212121;
z-index: 9;
}
.advanced_addons_flip_box.type-1 h3 {
margin-bottom: 0;
padding: 15px 0 8px 0;
}
.advanced_addons_flip_box.type-1 .advanced_addons_flip_box_front h3 {
color: #fff;
}
.advanced_addons_flip_box.aae-flip-top .advanced_addons_flip_box_back {
transform: rotateX(-180deg);
}
.advanced_addons_flip_box.type-1 i {
font-size: 36px;
}
.advanced_addons_flip_box.type-1 .advanced_addons_flip_box_front i {
color: #ffffff;
}
.advanced_addons_flip_box.type-1 p {
margin-bottom: 0;
font-size: 14px;
letter-spacing: 1px;
}
.advanced_addons_flip_box.aae-flip-top:hover .advanced_addons_flip_box_back {
transform: rotateX(0deg);
}
.advanced_addons_flip_box_back {
background: #ffffff;
} .advanced_addons_flip_box.aae-flip-right .advanced_addons_flip_box_back {
transform: rotateY(-180deg);
}
.advanced_addons_flip_box.aae-flip-right:hover .advanced_addons_flip_box_back {
transform: rotateY(0deg);
}
.advanced_addons_flip_box.aae-flip-right:hover .advanced_addons_flip_box_front {
transform: rotateY(180deg);
} .advanced_addons_flip_box.aae-flip-left .advanced_addons_flip_box_back {
transform: rotateY(180deg);
}
.advanced_addons_flip_box.aae-flip-left:hover .advanced_addons_flip_box_back {
transform: rotateY(0deg);
}
.advanced_addons_flip_box.aae-flip-left:hover .advanced_addons_flip_box_front {
transform: rotateY(-180deg);
} .advanced_addons_flip_box.aae-flip-bottom .advanced_addons_flip_box_back {
transform: rotateX(180deg);
}
.advanced_addons_flip_box.aae-flip-bottom:hover .advanced_addons_flip_box_back {
transform: rotateX(0deg);
}
.advanced_addons_flip_box.aae-flip-bottom:hover .advanced_addons_flip_box_front {
transform: rotateX(-180deg);
} .advanced_addons_flip_box.aae-fadeIn .advanced_addons_flip_box_back {
opacity: 0;
visibility: visible;
}
.advanced_addons_flip_box.aae-fadeIn:hover .advanced_addons_flip_box_front {
visibility: hidden;
opacity: 0;
}
.advanced_addons_flip_box.aae-fadeIn:hover .advanced_addons_flip_box_back {
visibility: visible;
opacity: 1;
} .advanced_addons_flip_box.aae-zoomIn .advanced_addons_flip_box_back {
transform: scale(.75);
visibility: hidden;
opacity: 0;
}
.advanced_addons_flip_box.aae-zoomIn:hover .advanced_addons_flip_box_back {
transform: scale(1);
visibility: visible;
opacity: 1;
}
.advanced_addons_flip_box.aae-zoomIn:hover .advanced_addons_flip_box_front {
transform: scale(.75);
visibility: hidden;
opacity: 0;
} .advanced_addons_flip_box.aae-zoomOut:hover .advanced_addons_flip_box_front {
transform: scale(.75);
opacity: 0;
visibility: hidden;
} .advanced_addons_flip_box.type-2 .advanced_addons_flip_box_back {
padding: 20px 20px 20px 20px;
text-align: left;
align-items: flex-start;
background: #fefafa;
}
.advanced_addons_flip_box.type-2 {
border-radius: 3px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, .10);
} .advanced_addons_flip_box.type-3 {
height: 90px;
width: 90px;
border-radius: 50%;
display: inline-flex;
}
.advanced_addons_flip_box.type-3 .advanced_addons_flip_box_front,
.advanced_addons_flip_box.type-3 .advanced_addons_flip_box_back {
border-radius: 50%;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .10);
}
.advanced_addons_flip_box.type-3 i {
font-size: 50px;
color: #ffffff;
}