Image Flip Animation (css 3d) - kary4/divituts GitHub Wiki

1. Add this css:

/*===add css3d class to the image module that should animate===*/
.css3d {
    transform: perspective(833px) rotateY(0deg);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: all 2s 0s;
}

.css3d:after {
    content: "";
    width: 100%;
    height: 314px;
    background-size: 100% 100%;
    position: absolute;
    display: block;
    top: 0;
    backface-visibility: hidden!important;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

/*===add animate class to the Column that contains the image module====*/
.animate .css3d {
    transform:rotateY(180deg);
    transition: all 2s 0s;
}

.row-3d:hover .css3d {
    transform: rotateY(180deg);
}

2. Add the following line to the After element field under the Image Module Settings: background: url(http://elegantthemes1and1.com/wp-content/uploads/2013/06/hoodie_2_back.jpg);

3. Test page: http://elegantthemes1and1.com/210943-2/