lixin-web/webapp/less/plugins/imagehover/effects/_imghvr-flip.less

vue and bootstrap

 /* imghvr-flip-*
   ----------------------------- */
[class^='imghvr-flip-'], [class*=' imghvr-flip-'] {
	.perspective(50em);
	img {
		backface-visibility: hidden;
	}
	figcaption {
		opacity: 0;
	}
	&:hover {
		> img {
			opacity: 0;
		}
		figcaption {
			opacity: 1;
			.transition-delay(@transition-duration * 0.4);
		}
	}
}
 /* imghvr-flip-horiz
   ----------------------------- */
.imghvr-flip-horiz {
	figcaption {
		.rotateX(90deg);
		.transform-origin(0%,50%);
	}
	&:hover {
		img {
			.transform(rotateX(-180deg));
		}
		figcaption {
			.rotateX(0deg);
		}
	}
}
 /* imghvr-flip-vert
   ----------------------------- */
.imghvr-flip-vert {
	figcaption {
		.rotateY(90deg);
		.transform-origin(50%,0%);
	}
	&:hover {
		> img {
			.transform(rotateY(-180deg));
		}
		figcaption {
			.rotateY(0deg);
		}
	}
}
 /* imghvr-flip-diag-1
   ----------------------------- */
.imghvr-flip-diag-1 {
	figcaption {
		.rotate3d(1,-1,0,100);
	}
	&:hover {
		> img {
			.rotate3d(-1,1,0,100);
		}
		figcaption {
			.rotate3d(0,0,0,0);
		}
	}
}
 /* imghvr-flip-diag-2
   ----------------------------- */
.imghvr-flip-diag-2 {
	figcaption {
		.rotate3d(1,1,0,100);
	}
	&:hover {
		> img {
			.rotate3d(-1,-1,0,100);
		}
		figcaption {
			.rotate3d(0,0,0,0);
		}
	}
}